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 a JSON string into a JavaScript object?
JSON (JavaScript Object Notation) is a lightweight data format commonly used for data exchange between servers and web applications. When receiving data from a server, it typically arrives as a JSON string that needs to be converted into a JavaScript object to be usable in your code.
Why JSON.parse() Over eval()
There are two possible ways to convert a JSON string into a JavaScript object: eval() and JSON.parse(). However, eval() is unsafe and vulnerable to code injection attacks, making it unsuitable for parsing JSON data. JSON.parse() is the recommended and secure method.
Syntax
JSON.parse(text[, reviver])
Where text is the JSON string to be parsed, and reviver is an optional function that transforms the results.
Example 1: Converting JSON Object String
Here's how to convert a JSON string representing an object into 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 String to Object</title>
</head>
<body>
<p id="result"></p>
<script>
var jsonString = '{"name":"Rajesh","company":"TutorialsPoint","location":"Hyderabad"}';
var employee = JSON.parse(jsonString);
document.getElementById('result').innerHTML =
'Name: ' + employee.name + '<br>' +
'Company: ' + employee.company + '<br>' +
'Location: ' + employee.location;
</script>
</body>
</html>
Name: Rajesh Company: TutorialsPoint Location: Hyderabad
Example 2: Converting JSON Array String
JSON arrays can also be parsed into JavaScript arrays:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Array to JavaScript Array</title>
</head>
<body>
<p id="result"></p>
<script>
var jsonArray = '["iPhone","Samsung","OnePlus"]';
var phones = JSON.parse(jsonArray);
document.getElementById('result').innerHTML =
'First phone: ' + phones[0] + '<br>' +
'Third phone: ' + phones[2] + '<br>' +
'Array length: ' + phones.length;
</script>
</body>
</html>
First phone: iPhone Third phone: OnePlus Array length: 3
Example 3: Handling Dates in JSON
JSON doesn't support Date objects natively, so dates must be stored as strings and converted after parsing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON with Date String</title>
</head>
<body>
<h3>Converting JSON String with Date</h3>
<p id="result"></p>
<script>
var jsonString = '{"name":"Ram", "dob":"1995-01-01", "id":"7365000011111"}';
var person = JSON.parse(jsonString);
// Convert date string to Date object
person.dob = new Date(person.dob);
document.getElementById('result').innerHTML =
'Name: ' + person.name + '<br>' +
'Date of Birth: ' + person.dob.toDateString() + '<br>' +
'ID: ' + person.id;
</script>
</body>
</html>
Name: Ram Date of Birth: Sun Jan 01 1995 ID: 7365000011111
Error Handling
Always wrap JSON.parse() in a try-catch block to handle invalid JSON strings:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Parse Error Handling</title>
</head>
<body>
<p id="result"></p>
<script>
var invalidJson = '{"name":"John", "age":}'; // Missing value
try {
var obj = JSON.parse(invalidJson);
document.getElementById('result').innerHTML = 'Parsing successful!';
} catch (error) {
document.getElementById('result').innerHTML = 'Error: ' + error.message;
}
</script>
</body>
</html>
Error: Unexpected token } in JSON at position 16
Conclusion
JSON.parse() is the secure and recommended method for converting JSON strings to JavaScript objects. Always handle potential parsing errors with try-catch blocks, and remember that dates must be converted separately after parsing.
3K+ Views
