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 Create a Livewire Image Upload in Laravel 10?
How to Create a Livewire Image...

Livewire has revolutionized the way developers build interactive web applications with its real-time capabilities. And w...

Read More

Aug-02-2023

Laravel 8 Ajax CRUD With Yajra Datatable
Laravel 8 Ajax CRUD With Yajra...

In this tutorial, we will see laravel 8 ajax crud with yajra datatable. I will show you how to create ajax crud ope...

Read More

Jan-05-2022

How To Create Dynamic XML Sitemap In Laravel 9
How To Create Dynamic XML Site...

In this article, we will see how to create a dynamic XML sitemap in laravel 9. As we know sitemap is a very im...

Read More

Jun-08-2022

How To Create Dynamic Bar Chart In Laravel 9
How To Create Dynamic Bar Char...

In this article, we will see how to create a dynamic bar chart in laravel 9. Bar charts are used to represent...

Read More

Mar-21-2022