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 Convert HTML To PDF using JavaScript
How To Convert HTML To PDF usi...

In this example we will see how to convert html to pdf using javaScript. PDF file format is very useful to dow...

Read More

Aug-23-2021

Laravel 8 Import Export CSV/EXCEL File Example
Laravel 8 Import Export CSV/EX...

In this article, we will see the laravel 8 import and export CSV/EXCEL file example. We will simple create imp...

Read More

Oct-01-2020

Laravel tips: DB Models and Eloquent - 2023
Laravel tips: DB Models and El...

Welcome to the fourth installment of our "Laravel Tips: DB Models and Eloquent" series. In this article, we co...

Read More

Oct-18-2023

How to Display Validation Error Message in Laravel Vue JS
How to Display Validation Erro...

Hey folks, are you ready to make your Laravel Vue.js application even more user-friendly by implementing validation erro...

Read More

Mar-08-2024