Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Convert JSON String to Array of JSON Objects Using JavaScript?
To convert JSON string to array of JSON objects using JavaScript is necessary because JSON strings cannot be directly modified or manipulated, so we need this conversion which allows us to access, modify and iterate over each item. We will be discussing three different approaches for this conversion from JSON strings to array of JSON objects.
In this article we are having JSON string, our task is to convert JSON string to array of JSON objects using JavaScript.
Approaches to convert JSON string to objects
Here is a list of approaches to convert JSON string to array of JSON objects using JavaScript which we will be discussing in this article with stepwise explanation and complete example codes.
Using JSON.parse() Method (Recommended)
The JSON.parse() method is the safest and most reliable way to convert JSON string to array of JSON objects. It properly parses valid JSON strings and throws an error for invalid JSON.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converting JSON String to Array using JSON.parse()</title>
</head>
<body>
<h2>Converting JSON String to Array of JSON Objects</h2>
<p>In this example, we have used <strong>JSON.parse()</strong> method to convert JSON string to array of JSON objects.</p>
<button onclick="convert()">Click Here</button>
<div id="result"></div>
<script>
function convert() {
let jsonString = '[{"Name": "Ram", "Hobby": "Singing"}, {"Name": "Shyam", "Hobby": "Playing Games"}, {"Name": "Mohan", "Hobby": "Reading Books"}]';
let jsonArray = JSON.parse(jsonString);
document.getElementById("result").innerHTML =
"<h3>Result:</h3>" +
"<p>Array: " + JSON.stringify(jsonArray) + "</p>" +
"<p>Type: " + typeof jsonArray + "</p>" +
"<p>Length: " + jsonArray.length + "</p>";
console.log(jsonArray);
}
</script>
</body>
</html>
Using eval() Method (Not Recommended)
The eval() method can convert JSON strings, but it's considered unsafe because it executes any JavaScript code. This approach should be avoided in production due to security risks.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converting JSON String to Array using eval()</title>
</head>
<body>
<h2>Converting JSON String to Array using eval()</h2>
<p><strong>Warning:</strong> eval() method is not recommended due to security risks.</p>
<button onclick="convert()">Click Here</button>
<div id="result"></div>
<script>
function convert() {
let jsonString = '[{"Name": "Samay", "Hobby": "Dancing"}, {"Name": "Anjani", "Hobby": "Singing"}, {"Name": "Farhan", "Hobby": "Chess"}]';
let jsonArray = eval(jsonString);
document.getElementById("result").innerHTML =
"<h3>Result:</h3>" +
"<p>Array: " + JSON.stringify(jsonArray) + "</p>" +
"<p>Type: " + typeof jsonArray + "</p>";
console.log(jsonArray);
}
</script>
</body>
</html>
Using Function Constructor
The Function constructor creates a new function that returns the parsed JSON. While less common, it provides another way to convert JSON strings.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converting JSON String to Array using Function Constructor</title>
</head>
<body>
<h2>Converting JSON String to Array using Function Constructor</h2>
<button onclick="convert()">Click Here</button>
<div id="result"></div>
<script>
function convert() {
let jsonString = '[{"Name": "Ram", "Age": 20}, {"Name": "Shyam", "Age": 21}, {"Name": "Mohan", "Age": 22}]';
let jsonArray = new Function('return ' + jsonString)();
document.getElementById("result").innerHTML =
"<h3>Result:</h3>" +
"<p>Array: " + JSON.stringify(jsonArray) + "</p>" +
"<p>Type: " + typeof jsonArray + "</p>";
console.log(jsonArray);
}
</script>
</body>
</html>
Comparison of Methods
| Method | Security | Performance | Recommended |
|---|---|---|---|
JSON.parse() |
Safe | Fast | ? Yes |
eval() |
Unsafe | Slow | ? No |
| Function Constructor | Moderate | Moderate | ?? Use with caution |
Key Points
- JSON.parse() is the standard and safest method for parsing JSON strings
- eval() should be avoided due to security vulnerabilities
- Always validate JSON strings before parsing to handle errors gracefully
- The Function constructor approach is less common and should be used carefully
Conclusion
JSON.parse() is the recommended approach for converting JSON strings to arrays of objects due to its safety, performance, and reliability. Avoid eval() in production environments as it poses security risks.
10K+ Views
