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));