How to convert JSON string to array of JSON objects using JavaScript?

Javascript Web Development Front End Technology

JSON is used to exchange data from client to server. JSON is so lightweight and it is easy to read for a human and also easy for a machine to parse and generate. Many times we get data in string format and we need to convert that data into an array. In this article, we will talk about multiple ways to convert JSON string to array of JSON objects using JavaScript.

Using JSON.parse( ) method
Using eval( ) function

Appraoch 1: Using JSON.parse( ) Method

The JSON.parse method is used to Convert JSON strings to a JSON objects. This is a very fast and standard way to deal with JSON data. The JSON.parse takes String as an input and returns the Javascript value, object, array, Boolean, null, etc depending upon the structure of the input value.

Example

In this example, we have a JSON string containing the data of various persons and we are going to convert the JSON string into a JSON object using the JSON.parse method.

<html>
<body>
   <h2>Convert JSON string to array of JSON objects using JSON.parse method</h2>
   <p>Click the following button to convert JSON string to an array of JSON objects</p><br>
   <button id="btn" onclick="convert( )" > Click Here </button> <br>
   <p id="result"> </p>
   <script>
      function convert(){
         
         // Initialize the dummy JSON String
         let jsonString = '[ { "name" : "Ram", "age" : 20, "car" : "ford" },{ "name": "Shyam", "age" : "21", "car" : "tata" }, { "name" : "Mohan", "age" : 22, "car" : "toyota" } ]'
         
         // Conver the JSON String to JSON object
         let jsonObject = JSON.parse(jsonString);
         
         // Get the paragraph element
         let p = document.getElementById("result")
         
         /// Print the Object
         p.innerText += JSON.stringify(jsonObject);
         
         // Print the Object on Console
         console.log(jsonObject)
      }
   </script>
</body>
</html>

Approach 2: Using eval( ) Function

The eval( ) function in javascript is a global function that is used to evaluate a string as an expression. To convert the JSON string to array of JSON objects using the eval function we pass the JSON string into it and the function returns the JSON object.

Example

In this example, we have a JSON string containing the data of various people and we are going to convert the JSON string into a JSON object using the eval( ) function.

<html>
<body>
   <h2>Convert JSON string to array of JSON objects using eval function</h2>
   <p>Click the following button to convert JSON string to an array of JSON objects</p><br>
   <button id="btn" onclick="convert( )" > Click Here </button> <br>
   <p id="result"></p>
   <script>
      function convert(){
         
         // Initialize the dummy JSON String
         let jsonString = '[ { "name" : "Ram", "age" : 20, "car" : "ford"},{ "name": "Shyam", "age" : "21", "car" : "tata" }, { "name" : "Mohan", "age" : 22, "car" : "toyota" } ]'
         
         // Conver the JSON String to JSON object
         let jsonObject = eval(jsonString);
         
         // Get the paragraph element
         let p = document.getElementById("result")
         
         /// Print the Object
         p.innerText += JSON.stringify(jsonObject);
         
         // Print the Object on Console
         console.log(jsonObject)
      }
   </script>
</body>
</html>