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
Laravel Accessor and Mutator Example
Laravel Accessor and Mutator E...

In this article, we will see the laravel accessor and mutator example. Here, we will learn what is accessor an...

Read More

Mar-16-2021

How To Create Custom Middleware In Laravel 9
How To Create Custom Middlewar...

In this article, we will see how to create custom middleware in laravel 9. Laravel middleware provides a conve...

Read More

Mar-27-2022

Laravel 9 Yajra Datatable Example
Laravel 9 Yajra Datatable Exam...

In this artical we will see laravel 9 yajra datatable example. As we all used datatable on our backend side project, Her...

Read More

Mar-10-2022

11+ Laravel Tips: Optimize Database Queries (2024)
11+ Laravel Tips: Optimize Dat...

Hey developers! If you're like me, constantly striving to make your Laravel applications faster and more effici...

Read More

Jan-05-2024