How to convert a JSON string into a JavaScript object?

Javascript Web Development Front End Technology

In this article we are going to discuss how to convert a JSON string into a JavaScript object with suitables examples in JavaScript.

There are two possible ways to convert a JSON string into a Javascript object – eval() and parse(). The usage of eval() method is unsafe and not preferred. It is vulnerabable to hackers. The parse() method is preferred in general anytime.

The typical application for JSON is Data transfer to and from a web server. The data that has been sent from a server is always a JSON string. Using JSON.parse(), we can convert the JSON string into a JS object.

Syntax

The syntax on how to convert a JSON string into JS object is −

JSON.parse(text);

Where, text is the string whose value is to be converted into an object.

Example 1

In this example, we use parse() method to convert a JSON string to object. The dictionary is taken as a JSON string.

HTML as a JSON

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>To convert a JSON string into a JS object</title>
</head>
<body>
   <p id="parse"></p>
   <script>
      var json = '{"name":"Rajesh","company": "Tutorials point","job_location":"Hyderabad"}';
      var object = JSON.parse(json);
      document.getElementById('parse').innerHTML='object.name = '+object.name+'<br/>'+'object.company = '+object.company+'<br/>'+'object.job_location = '+object.job_location;
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 2

In this example, we use parse() method to convert a JSON string to object. The dictionary is taken as a JSON string.

Array as a JSON

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>To convert a JSON string into a JS object</title>
</head>
<body>
   <p id="parse"></p>
   <script>
      var json = '["iPhone","Samsung","One plus"]';
      var arr_object = JSON.parse(json);
      document.getElementById('parse').innerHTML='arr_object[0] = '+arr_object[0]+'<br/>'+'arr_object[2] = '+arr_object[2];
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 3

The below example program illustrates about converting a JSON string into JS object where the date is given as a string in JSON string. Because JSON string does not accept Date objects.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>To convert a JSON string into a JS object when date is given as a string</title>
</head>
<body>
   <h3>convert a JSON string( where date is included as a string) into a JS object </h3>
   <p id="parse"></p>
   <script>
      //You cannot take a date object directly in a JSON String. Use it is as a string in JSON string.
      const person = '{"name":"Ram", "dob":"01-01-1995", "aadhar-id":"7365 0000 1111"}';
      const object = JSON.parse(person);
      object.dob = new Date(object.dob);
      document.getElementById('parse').innerHTML = 'object.name = ' + object.name + '<br/>' + 'object.dob = ' +object.dob;
   </script>
</body>

On executing the above code, the following output is generated.