Convert JSON String to JSON Object Javascript

Websolutionstuff | Jul-14-2021 | Categories : jQuery

In this example we will see convert JSON string to JSON object in Javascript. You can use the javascript JSON.parse() method to convert a JSON string into a JSON object. JSON is used for exchange data between server and web.

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

JSON has built on two types :

  • A collection of key and value pairs.
  • An ordered list of values.

So, let's start example of convert JSON string to JSON object in Javascript

Example - 1

we recived JSON string from web server.

'{"name":"dell", "age":20, "city":"Dubai", "gender":"male"}'

Now we can convert string to json object using json.parse() method.

var user = JSON.parse('{"name":"dell", "age":20, "city":"Dubai", "gender":"male"}');

 

Example - 2

 Now we are converting JSON text to Javascript Object like below example.

<script>
const txt = '{"name":"dell", "age":20, "city":"Dubai", "gender":"male"}'
const obj = JSON.parse(txt);
console.log("Name: "+obj.name);
console.log("Age: "+obj.age);
</script>

 

Example - 3

Now in this example convert Array as JSON using json.parse() method in javascript. so, parsing json array will be parsed into a JavaScript array.

<script>
const text = '[ "Dell", "30", "Dubai", "Male" ]';
const parseArr = JSON.parse(text);
console.log(parseArr[0]);
console.log(parseArr[1]);
</script>

 

Recommended Post
Featured Post
How To Validate International Phone Number Using jQuery
How To Validate International...

In this article, we will see how to validate international phone numbers using jquery. Here, we will learn about mo...

Read More

May-12-2023

How to File Upload in Angular 17 Tutorial
How to File Upload in Angular...

In this article, we'll see how to file upload in the angular 17 tutorial. Here, we'll learn about file uplo...

Read More

Apr-03-2024

Laravel 8 Socialite Login With GitHub Account
Laravel 8 Socialite Login With...

In this tutorial we will see laravel 8 socialite login with github account. explains how to integrate OAuth github...

Read More

Oct-25-2021

Laravel Query Builder with Macros & Higher-Order Functions
Laravel Query Builder with Mac...

Hello, laravel web developers! In Laravel, the Query Builder is a powerful tool for building database queries, but somet...

Read More

Oct-11-2024