How to Convert JSON String to Array of JSON Objects Using JavaScript ?


Converting JSON String to Array of JSON Objects in JavaScript

In modern web development, handling JSON (JavaScript Object Notation) is inevitable. JSON is a lightweight data-interchange format widely used for transmitting data between a server and a web application. Often, you might need to convert a JSON string into an array of JSON objects in JavaScript to manipulate or iterate over the data efficiently. In this article, we'll explore various approaches to achieve this conversion, along with practical examples.

Introduction to JSON

JSON is a text-based data format that is easy for humans to read and write and easy for machines to parse and generate. It consists of key-value pairs and supports various data types such as strings, numbers, arrays, and objects. Here's a basic example of JSON:

{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}

Approach 1: Using JSON.parse() Method

The `JSON.parse()` method is the recommended way to parse a JSON string and convert it into a JavaScript object. It takes a JSON string as input and returns a JavaScript object.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON to Array of JSON Objects Using JSON Parse</title>
</head>
<body>
  <button onclick="convertUsingParse()">Convert Using JSON.parse()</button>
  <br>
  <p id="result"></p>

  <script>
    // JavaScript Code By Codegyan
    const jsonString = '[{"name": "John Doe", "age": 30, "city": "New York"}, {"name": "Jane Smith", "age": 25, "city": "Los Angeles"}]';

    function convertUsingParse() {
      const result = JSON.parse(jsonString);
      document.getElementById('result').innerText = JSON.stringify(result);
    }

  </script>
</body>
</html>

Explanation:

  • We define a JSON string containing an array of JSON objects.
  • Using JSON.parse(), we convert the JSON string into a JavaScript array of objects.
  • Finally, we display the converted array of objects in the HTML.

Approach 2: Using eval() Function (Not Recommended)

The `eval()` function can also be used to convert a JSON string into a JavaScript object. However, using `eval()` is not recommended due to security risks associated with executing arbitrary code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON to Array of JSON Objects Using Eval</title>
</head>
<body>

  <button onclick="convertUsingEval()">Convert Using eval()</button>
  <br>
  <p id="result"></p>

  <script>
    // JavaScript Code By Codegyan
    const jsonString = '[{"name": "John Doe", "age": 30, "city": "New York"}, {"name": "Jane Smith", "age": 25, "city": "Los Angeles"}]';

    function convertUsingEval() {
      const result = eval('(' + jsonString + ')');
      document.getElementById('result').innerText = JSON.stringify(result);
    }

  </script>
</body>
</html>

Explanation:

  • We define a JSON string containing an array of JSON objects.
  • Using eval(), we parse the JSON string into a JavaScript array of objects.
  • Finally, we display the converted array of objects in the HTML.

Approach 3: Iterating Over JSON Objects

If you're dealing with a JSON string that represents an array of JSON objects, you can iterate over each object and convert it into a JavaScript object manually.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON to Array of JSON Objects Using Iteratively</title>
</head>
<body>
  <button onclick="convertIteratively()">Convert Iteratively</button>
  <br>
  <p id="result"></p>

  <script>
    // JavaScript Code By Codegyan
    const jsonString = '[{"name": "John Doe", "age": 30, "city": "New York"}, {"name": "Jane Smith", "age": 25, "city": "Los Angeles"}]';

    function convertIteratively() {
      const jsonArray = JSON.parse(jsonString);
      const jsonArrayObjects = [];

      for (let i = 0; i < jsonArray.length; i++) {
        jsonArrayObjects.push(jsonArray[i]);
      }

      document.getElementById('result').innerText = JSON.stringify(jsonArrayObjects);
    }

  </script>
</body>
</html>

Explanation:

  • We define a JSON string containing an array of JSON objects.
  • We initialize an empty array, jsonArray, to store the parsed objects.
  • Using JSON.parse() with a reviver function, we iterate over each JSON object and push it into the jsonArray.
  • Finally, we display the converted array of objects in the HTML.

Approach 4: Using Array.map()

The `Array.map()` method can be used to iterate over an array and apply a transformation function to each element, returning a new array of transformed elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON to Array of JSON Objects Using Map</title>
</head>
<body>
  <button onclick="convertUsingMap()">Convert Using Array.map()</button>
  <br>
  <p id="result"></p>

  <script>
    // JavaScript Code By Codegyan
    const jsonString = '[{"name": "John Doe", "age": 30, "city": "New York"}, {"name": "Jane Smith", "age": 25, "city": "Los Angeles"}]';

    function convertUsingMap() {
      const jsonArray = JSON.parse(jsonString);
      const result = jsonArray.map(obj => obj);
      document.getElementById('result').innerText = JSON.stringify(result);
    }
  </script>
</body>
</html>

Explanation:

  • We define a JSON string containing an array of JSON objects.
  • Using JSON.parse(), we convert the JSON string into a JavaScript array of objects.
  • We use the Array.map() method to transform each object into its string representation using JSON.stringify().
  • Finally, we join the string representations and display the converted array of objects in the HTML.

Conclusion

In conclusion, we explored four different approaches to convert a JSON string into an array of JSON objects using JavaScript. While `JSON.parse()` is the recommended and safest method, other approaches such as `eval()` and manual iteration should be used cautiously due to security concerns. `Array.map()` provides a concise and elegant way to achieve the conversion when dealing with arrays of JSON objects. Remember to choose the approach that best fits your specific use case and security requirements.

       

Advertisements

ads