Concept and Features of JSON

📖 Theory

data એ text છે; app ને objects જોઈએ છે

FestConnect નું events.xml browser સુધી text ની wall તરીકે પહોંચે છે. તેને USE કરવા માટે, તમારા JavaScript ને parsed tree ને walk કરવું પડે છે, node by node, દરેક element ને તેના children માટે asking: workable, verbose, joyless.

meanwhile, JavaScript ની અંદર, તમારી પાસે already event માટે perfect shape છે: object literal {name: "Garba Night", seats: 350}.

એટલે obvious question, 2001 ની આસપાસ asked અને Douglas Crockford દ્વારા answered: શા માટે DATA FILE ને OBJECT જેવું look ન કરાવવું? એ answer એ JSON છે.

📖 Theory

JSON, ઔપચારિક રીતે

JSON (JavaScript Object Notation) એ lightweight, text-based data-interchange format છે: JavaScript ની object-literal syntax થી born, પણ language-independent: Python, Java, PHP અને VB.NET બધા તેને happily parse કરે છે.

આખી grammar:

• data "key": value pairs માં lives કરે છે
• { } pairs ના object ને hold કરે છે; [ ] values ના array ને hold કરે છે
• keys હંમેશા double-quoted strings છે
• values: string (double quotes), number, object, array, true, false, null

nothing else exist નથી કરતું: કોઈ functions નહીં, કોઈ undefined નહીં, કોઈ comments નહીં.

⌨️ Practical

events.json: આખું fest, glance પર readable

{
  "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

એક parse: text live object બને છે (run it)

// file plain TEXT (string) તરીકે arrive થાય છે:
const text = '{"name": "Garba Night", "venue": "Main Ground", "seats": 350}';

// એક call text ને real JavaScript object માં turn કરે છે:
const event = JSON.parse(text);

console.log(event.name);        // Garba Night
console.log(event.seats - 1);   // 349: real number, maths work કરે છે

// અને reverse, object back to text 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

features list (exam form)

• Lightweight: કોઈ end tags નહીં; same data માટે XML ના bulk નો fraction
• Human-readable: ઉપર નું listing ને manual ની જરૂર નથી
• Easy to parse: એક JSON.parse(text) live object ને yield કરે છે; JSON.stringify(obj) તેને reverse કરે છે: XML tree ને walking સાથે compare કરો
• Language-independent: text in, native structures out, દરેક language માં
• Natural fit for JavaScript: parsed result IS JS object; event.seats just work કરે છે

Housekeeping: files .json માં end થાય છે, servers તેને application/json label કરે છે.

🧩 Quiz

આમાંથી કયું valid JSON છે?

1. { 'name': 'Garba Night' }
2. { "name": "Garba Night" }
3. { name: "Garba Night" }
4. { "name": "Garba Night", }

💭 Think first

શા માટે JSON એ web ને win કર્યું?

XML એ data-interchange throne ને hold કર્યું હતું જ્યારે JSON arrive થયું. today ના 2 listings અને features list થી, argue કરો 2 reasons JSON એ web APIs માટે તેને displaced કર્યું, tap કરતા પહેલા.

⚠️ Watch out

JSON એ JavaScript નથી

નામ બંને directions માં misleads કરે છે:

JS કરતા Stricter: single quotes, unquoted keys, trailing commas, comments: all fine JS literal માં, all fatal JSON.parse માટે.

JS કરતા Smaller: કોઈ functions નહીં, કોઈ undefined નહીં, કોઈ Date type નહીં (dates strings તરીકે travel કરે છે).

અને યાદ રાખો કે તે parsed થાય ત્યાં સુધી TEXT છે: raw string પર text.name undefined છે; object ફક્ત JSON.parse પછી exist કરે છે.

📖 Theory

જ્યાં events.json headed છે

pipeline ને view માં hold કરો: events.json server પર sits કરે છે; Unit 4 નું AJAX તેને text તરીકે fetch કરે છે without reload; JSON.parse તેને objects માં turn કરે છે; અને Unit 2 ના append/text methods તેને page માં pour કરે છે: આ subject નો દરેક unit એ pipe નો એક segment છે. next lesson formal XML-vs-JSON comparison ને stage કરે છે જે exam love કરે છે, બંને formats સાથે same fest data ને side by side carry કરતા.

✅ Summary

Key takeaways

• JSON = JavaScript Object Notation: lightweight, text-based data interchange, language-independent.
• Grammar: {"key": value} objects અને [value, value] arrays; keys હંમેશા double-quoted.
• છ value types: string (double quotes), number, object, array, true/false, null: nothing else.
• JSON.parse(text) live object આપે છે; JSON.stringify(obj) sendable text આપે છે.
• Features: lightweight, readable, easy to parse, language-independent, native to JS.
• JS literals કરતા stricter: no single quotes, unquoted keys, trailing commas અથવા comments.
• Memory hook: data file જે object જેવું look કરે છે જે તે બને છે.