JSON.parse() / stringify() Since: ES5(ECMAScript 2009)
Methods for converting between JSON-formatted strings and JavaScript objects. Used for data communication with servers and for storing data.
Syntax
// Converts a JSON string to a JavaScript object. var obj = JSON.parse(jsonString); // Converts a JavaScript object to a JSON string. var str = JSON.stringify(object); // Converts with indentation for readability. var str = JSON.stringify(object, null, indentSpaces);
Method List
| Method | Description |
|---|---|
| JSON.parse(string) | Converts a JSON-formatted string to a JavaScript object. Throws an error if the string is not valid JSON. |
| JSON.stringify(value) | Converts a JavaScript value to a JSON-formatted string. Pass a third argument to specify indentation and get a formatted string. |
Sample Code
// Use JSON.parse() to convert a JSON string to an object.
var jsonStr = '{"name": "Taro", "age": 25, "hobbies": ["reading", "movies"]}';
var user = JSON.parse(jsonStr);
console.log(user.name); // Outputs "Taro".
console.log(user.age); // Outputs "25".
console.log(user.hobbies[0]); // Outputs "reading".
// Use JSON.stringify() to convert an object to a JSON string.
var product = {
name: "Laptop",
price: 89800,
inStock: true
};
var productJson = JSON.stringify(product);
console.log(productJson); // Outputs a single-line JSON string.
// Convert with indentation for readability.
var prettyJson = JSON.stringify(product, null, 2);
console.log(prettyJson); // Outputs with 2-space indentation.
// Arrays can also be converted to JSON strings.
var colors = ["red", "blue", "green"];
console.log(JSON.stringify(colors)); // Outputs '["red","blue","green"]'.
// Practical example: saving and loading from localStorage.
var settings = { theme: "dark", fontSize: 16 };
localStorage.setItem("settings", JSON.stringify(settings)); // Save
var loaded = JSON.parse(localStorage.getItem("settings")); // Load
console.log(loaded.theme); // Outputs "dark".
Error Handling with JSON.parse()
Passing an invalid JSON string to 'JSON.parse()' throws an error. Always wrap the call in a 'try...catch' block when parsing strings whose content is not guaranteed, such as data received from a server.
// An invalid JSON string causes an error.
try {
var data = JSON.parse("this is not JSON");
} catch (e) {
console.log("Failed to parse JSON: " + e.message);
}
// Single quotes are not valid in JSON.
try {
var data = JSON.parse("{'name': 'Taro'}"); // Causes an error.
} catch (e) {
console.log("In JSON, property names and strings must use double quotes.");
}
Overview
JSON stands for JavaScript Object Notation — a lightweight text format for data exchange. It looks similar to JavaScript object literals, but has key differences: property names must always be enclosed in double quotes, and trailing commas are not allowed.
'JSON.parse()' and 'JSON.stringify()' are among the most commonly used methods in web application development. They are essential when converting a JSON string received from a server API into an object, or when converting an object into a JSON string to save it in 'localStorage'.
Note that 'JSON.stringify()' silently ignores functions, 'undefined', and 'Symbol' values. 'Date' objects are converted to strings, and 'NaN' and 'Infinity' are converted to 'null', so be careful when working with data that contains these values.
Browser Compatibility
2 or earlier ×
2.5 or earlier ×
3.1 or earlier ×
7 or earlier ×
10 or earlier ×
Android Browser
37+ ○
4 or earlier ×
Chrome Android
36+ ○
17 or earlier ×
Firefox Android
79+ ○
3 or earlier ×If you find any errors or copyright issues, please contact us.