JavaScript JSON

Websites rarely work alone. Your page talks to a server: it asks for a student's record, a list of courses, or a chai order — and the server answers. That answer travels as text, because text is the one thing every computer can read. The format of that text is called JSON — JavaScript Object Notation. It looks like a JavaScript object, but it is only text.

Diagram — see how it fits together

Think of it like a letter. A JavaScript object is a parcel — it holds real things you can use directly. JSON is the letter that describes the parcel, so it can travel by post. When the letter arrives, you open it and rebuild the parcel. JSON.stringify() writes the letter. JSON.parse() opens it.

JSON.stringify — object to text

let student = { name: "Priya", course: "HTML", marks: 92 };
let text = JSON.stringify(student);
// text is '{"name":"Priya","course":"HTML","marks":92}'

The result is a plain string. You can send it to a server, save it in the browser's storage, or print it on the page. Notice the double quotes — JSON always uses double quotes around names and string values. Single quotes are not allowed in JSON.

JSON.parse — text back to object

let back = JSON.parse(text);
console.log(back.name); // "Priya"

JSON.parse() reads the text and rebuilds the object, so you can use back.name and back.marks like normal. If the text is broken — a missing quote, a trailing comma — parse throws an error, so it is a good idea to wrap it in try...catch (the lesson before this one).

Where you meet JSON every day

• Fetching data — when a page loads a list of courses or exam results from a server, the answer is almost always JSON.
• Browser storage — localStorage can only store strings, so you stringify an object before saving it and parse it when you read it back.
• Forms and APIs — when a form is sent to a server, the data is usually packed into JSON first.

Common mistakes

• Using single quotes in JSON — {'name': 'Priya'} is valid JavaScript but broken JSON. JSON needs double quotes.
• Leaving a trailing comma — {"a": 1,} fails to parse. The last item has no comma after it.
• Putting a function in JSON — functions are dropped silently by stringify. JSON carries data, not behaviour.
• Forgetting that parse throws on bad text — wrap it in try...catch when the text comes from outside your code.
• Using the parsed result as a string — after parse you have a real object, so use back.name, not back["name"] as text.

Remember

• JSON is text that looks like an object — it is how data travels between computers.
• JSON.stringify(object) turns an object into a JSON string.
• JSON.parse(text) turns a JSON string back into an object.
• JSON rules: double quotes only, no functions, no trailing commas.
• JSON is a letter, not a parcel — text that describes the object.

Example explained

• let student = { name: "Rahul", course: "CSS", marks: 88 }; — a normal JavaScript object, the parcel.
• let text = JSON.stringify(student); — writes the letter: a string with double quotes around every name and string value.
• document.getElementById("jsonText").textContent = text; — the JSON text is shown in the box on the page, so you can see exactly what travels to the server.
• let back = JSON.parse(text); — opens the letter again and rebuilds the object.
• document.getElementById("out").textContent = back.name + " scored " + back.marks; — the rebuilt object works like the original: back.name is "Rahul" and back.marks is 88.