JSON Parse & JSON Stringify
JSON (JavaScript Object Notation) is a lightweight format for storing and exchanging data. Because it is text-based, you need to convert it to and from JavaScript objects to work with it effectively.
JSON.parse()
Converts a JSON string into a native JavaScript object or array.
- Input must be a valid JSON string.
- Returns an object or array that can be used in JavaScript.
- Cannot directly parse dates or functions (but workarounds exist).
Example:
const jsonText = '{"name":"John", "age":30, "city":"New York"}';
const user = JSON.parse(jsonText);
console.log(user.name); // John
console.log(user.age); // 30
Parsing Arrays:
const jsonArray = '["Ford", "BMW", "Audi"]';
const cars = JSON.parse(jsonArray);
console.log(cars[1]); // BMW
Handling Dates:
JSON cannot store Date objects directly. Store them as strings and convert back:
const text = '{"name":"John", "birth":"1986-12-14"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
console.log(obj.birth); // Sun Dec 14 1986 ...
Using Reviver Function:
You can transform specific fields while parsing:
const text = '{"name":"John", "birth":"1986-12-14"}';
const obj = JSON.parse(text, (key, value) => key === "birth" ? new Date(value) : value);
console.log(obj.birth); // Date object
JSON.stringify()
Converts a JavaScript object, array, or other value into a JSON string.
- Useful for sending data to a server or storing in
localStorage. - JSON strings follow strict formatting (double quotes for keys and string values).
Example:
const user = { name: "John", age: 30, city: "New York" };
const jsonString = JSON.stringify(user);
console.log(jsonString);
// {"name":"John","age":30,"city":"New York"}
Stringify Arrays:
const arr = ["John", "Peter", "Sally"];
const jsonArr = JSON.stringify(arr);
console.log(jsonArr); // ["John","Peter","Sally"]
Pretty Printing JSON:
const pretty = JSON.stringify(user, null, 2);
console.log(pretty);
/*
{
"name": "John",
"age": 30,
"city": "New York"
}
*/
Handling Dates:
Dates are automatically converted to strings:
const obj = { name: "John", today: new Date() };
const jsonStr = JSON.stringify(obj);
console.log(jsonStr); // {"name":"John","today":"2025-10-17T07:30:00.000Z"}
Functions and Undefined Values:
Functions and undefined are ignored by JSON.stringify:
const obj = { name: "John", age: function(){ return 30; }, city: undefined };
console.log(JSON.stringify(obj)); // {"name":"John"}
Convert Functions to Strings (Optional):
const obj = { name: "John", age: function(){ return 30; } };
obj.age = obj.age.toString();
console.log(JSON.stringify(obj)); // {"name":"John","age":"function(){ return 30; }"}
Practical Use Cases
Storing and Retrieving in Local Storage:
const user = { name: "Alice", age: 25 };
// Store
localStorage.setItem("user", JSON.stringify(user));
// Retrieve
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // Alice
Sending JSON to a Server:
fetch("<https://api.example.com/user>", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Bob", age: 28 })
})
.then(res => res.json())
.then(data => console.log(data));