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
Selected Reading
How to parse JSON object in JavaScript?
JSON (JavaScript Object Notation) is a lightweight data format commonly used for data exchange. JavaScript provides the built-in JSON.parse() method to convert JSON strings into JavaScript objects.
Syntax
JSON.parse(text, reviver)
Parameters
- text - The JSON string to parse
- reviver (optional) - A function that transforms the results
Basic JSON Parsing Example
<!DOCTYPE html>
<html>
<body>
<script>
// Simple JSON string
let jsonString = '{"name": "John", "age": 30, "city": "New York"}';
let parsedObject = JSON.parse(jsonString);
document.write("Name: " + parsedObject.name + "<br>");
document.write("Age: " + parsedObject.age + "<br>");
document.write("City: " + parsedObject.city);
</script>
</body>
</html>
Output
Name: John Age: 30 City: New York
Parsing Complex JSON with Date Conversion
<!DOCTYPE html>
<html>
<body>
<script>
let jsonData = '{"event1":{"title":"Employment period","start":"12/29/2011 10:20","end":"12/15/2013 00:00"},"event2":{"title":"Employment period","start":"12/14/2011 10:20","end":"12/18/2013 00:00"}}';
let myData = JSON.parse(jsonData);
let myArray = [];
for(let e in myData){
let dataCopy = myData[e];
for(let key in dataCopy){
if(key == "start" || key == "end"){
dataCopy[key] = new Date(dataCopy[key]);
}
}
myArray.push(dataCopy);
}
document.write("<pre>" + JSON.stringify(myArray, null, 2) + "</pre>");
</script>
</body>
</html>
Error Handling
<!DOCTYPE html>
<html>
<body>
<script>
let invalidJson = '{"name": "John", "age":}'; // Invalid JSON
try {
let result = JSON.parse(invalidJson);
document.write("Parsed successfully");
} catch (error) {
document.write("Error: " + error.message);
}
</script>
</body>
</html>
Output
Error: Unexpected token } in JSON at position 20
Using Reviver Function
<!DOCTYPE html>
<html>
<body>
<script>
let jsonString = '{"price": "100", "quantity": "5"}';
let result = JSON.parse(jsonString, function(key, value) {
if (key === "price" || key === "quantity") {
return parseInt(value); // Convert strings to numbers
}
return value;
});
document.write("Price: " + result.price + " (type: " + typeof result.price + ")<br>");
document.write("Quantity: " + result.quantity + " (type: " + typeof result.quantity + ")");
</script>
</body>
</html>
Output
Price: 100 (type: number) Quantity: 5 (type: number)
Key Points
- Always use
try-catchwhen parsing JSON to handle invalid JSON strings - Use the reviver function to transform values during parsing
-
JSON.parse()returns the corresponding JavaScript data type - Date strings need manual conversion to Date objects
Conclusion
JSON.parse() is the standard method to convert JSON strings into JavaScript objects. Always handle potential parsing errors and use reviver functions for data transformation when needed.
Updated on: 2026-03-15T21:50:32+05:30
732 Views
Advertisements