Theory
The data is text; the app wants objects
FestConnect's events.xml reaches the browser as a wall of text. To USE it, your JavaScript must walk a parsed tree, node by node, asking each element for its children: workable, verbose, joyless.
Meanwhile, inside JavaScript, you already have a perfect shape for an event: the object literal {name: "Garba Night", seats: 350}.
So the obvious question, asked around 2001 and answered by Douglas Crockford: why not make the DATA FILE look like the OBJECT? That answer is JSON.
Theory
JSON, formally
JSON (JavaScript Object Notation) is a lightweight, text-based data-interchange format: born from JavaScript's object-literal syntax, but language-independent: Python, Java, PHP and VB.NET all parse it happily.
The entire grammar:
- data lives in
"key": valuepairs { }holds an object of pairs;[ ]holds an array of values- keys are ALWAYS double-quoted strings
- values: string (double quotes), number, object, array,
true,false,null
Nothing else exists: no functions, no undefined, no comments.
Practical
events.json: the whole fest, readable at a glance
{
"fest": "TechnoUtsav 2026",
"events": [
{
"name": "Garba Night",
"venue": "Main Ground",
"seats": 350,
"online": false
},
{
"name": "Coding Contest",
"venue": "Lab 2",
"seats": 60,
"online": true
}
]
}
Practical
One parse: text becomes a live object (run it)
// The file arrives as plain TEXT (a string):
const text = '{"name": "Garba Night", "venue": "Main Ground", "seats": 350}';
// One call turns text into a real JavaScript object:
const event = JSON.parse(text);
console.log(event.name); // Garba Night
console.log(event.seats - 1); // 349: a real number, maths works
// And the reverse, object back to text for sending:
const outgoing = JSON.stringify({ name: "Robo Race", seats: 80 });
console.log(outgoing);
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
The features list (exam form)
- Lightweight: no end tags; a fraction of XML's bulk for the same data
- Human-readable: the listing above needs no manual
- Easy to parse: one
JSON.parse(text)yields a live object;JSON.stringify(obj)reverses it: compare that with walking an XML tree - Language-independent: text in, native structures out, in every language
- Natural fit for JavaScript: the parsed result IS a JS object;
event.seatsjust works
Housekeeping: files end in .json, servers label it application/json.
Quiz
Which of these is valid JSON?
- { 'name': 'Garba Night' }
- { "name": "Garba Night" }
- { name: "Garba Night" }
- { "name": "Garba Night", }
Show the answer
{ "name": "Garba Night" }
JSON demands double quotes on BOTH keys and string values, and option B alone obeys. Single quotes (option A) are legal JavaScript but illegal JSON: the most common hand-written JSON bug there is. An unquoted key (option C) is likewise fine in a JS object literal and fatal in JSON: JSON is STRICTER than the syntax it grew from. The trailing comma (option D) after the last pair is the third classic rejection. When JSON.parse throws at position 3, it is nearly always one of these 3 slips.
Think first
Why did JSON win the web?
XML held the data-interchange throne when JSON arrived. From today's 2 listings and the features list, argue the 2 reasons JSON displaced it for web APIs, before tapping.
Show the answer
Weight: every XML element pays for a full closing tag; JSON's braces and brackets carry the same structure in far fewer bytes: over millions of requests, that is real bandwidth and speed. Parsing distance: XML parses into a DOM you must then WALK; JSON parses directly into the objects and arrays your code already speaks: one line, zero ceremony. Since the browser side of every exchange is JavaScript anyway, the format that IS JavaScript notation had home advantage. The full head-to-head, similarities included, is next lesson's whole agenda.
Watch out
JSON is not JavaScript
The name misleads in both directions:
Stricter than JS: single quotes, unquoted keys, trailing commas, comments: all fine in a JS literal, all fatal to JSON.parse.
Smaller than JS: no functions, no undefined, no Date type (dates travel as strings).
And remember it is TEXT until parsed: text.name on the raw string is undefined; the object exists only after JSON.parse.
Theory
Where events.json is headed
Hold the pipeline in view: events.json sits on the server; Unit 4's AJAX fetches it as text without a reload; JSON.parse turns it into objects; and Unit 2's append/text methods pour it into the page: every unit of this subject is one segment of that pipe. Next lesson stages the formal XML-vs-JSON comparison the exam loves, with both formats carrying the same fest data side by side.
Summary
Key takeaways
- JSON = JavaScript Object Notation: lightweight, text-based data interchange, language-independent.
- Grammar: {"key": value} objects and [value, value] arrays; keys always double-quoted.
- Six value types: string (double quotes), number, object, array, true/false, null: nothing else.
- JSON.parse(text) gives a live object; JSON.stringify(obj) gives sendable text.
- Features: lightweight, readable, easy to parse, language-independent, native to JS.
- Stricter than JS literals: no single quotes, unquoted keys, trailing commas or comments.
- Memory hook: the data file that looks like the object it becomes.