Chapter 19 — JSON

JSON — turli dasturlash tillari va tizimlar orasida ma'lumot almashish uchun ishlatiladigan eng mashhur format. Bu bobda JSON bilan ishlashni o'rganamiz.

---

19.1 JSON nima?

Simple Explanation

JSON (JavaScript Object Notation) — ma'lumotni matn (string) ko'rinishida saqlash uchun ishlatiladigan format, u JavaScript object sintaksisiga juda o'xshaydi.

Why Does It Exist?

Server bilan brauzer orasida, yoki ikkita turli dastur orasida ma'lumot almashish kerak bo'lganda, ob'ektni to'g'ridan-to'g'ri yuborib bo'lmaydi — uni matn (string) ko'rinishiga o'tkazish kerak. JSON — bu vazifani bajaradi.

Real-Life Analogy

📦 JSON — bu xalqaro pochta bo'g'lami: har qanday davlat (dasturlash tili) uni ochib, ichidagi ma'lumotni tushuna oladi, chunki format universal.

Example — JSON ko'rinishi

data.json
JSONNusxalash
01{
02    "name": "Ali",
03    "age": 25,
04    "isStudent": false,
05    "hobbies": ["kitob o'qish", "sport"]
06}

⚠️ Common Mistake
JSON'da key nomlari har doim qo'sh tirnoq ("key") bilan yozilishi kerak, JavaScript object'idagidek tirnoqsiz emas. Bundan tashqari, JSON'da function, undefined va comment yozib bo'lmaydi.

19.2 JSON.stringify() — Object'ni JSON string'ga aylantirish

Simple Explanation

JSON.stringify() — JavaScript object'ni JSON formatidagi stringga aylantiradi.

Example

script.js
JavaScriptNusxalash
01let user = {
02    name: "Vali",
03    age: 30,
04    isActive: true
05};
06 
07let jsonString = JSON.stringify(user);
08 
09console.log(jsonString);
10// '{"name":"Vali","age":30,"isActive":true}'
11 
12console.log(typeof jsonString); // "string"

Explanation

E'tibor bering: natija — oddiy object emas, balki string. Buni typeof orqali tekshirib ko'rish mumkin.

Chiroyli formatlash (Pretty Print)

script.js
JavaScriptNusxalash
01let formatted = JSON.stringify(user, null, 2);
02 
03console.log(formatted);

Natija:

data.json
JSONNusxalash
01{
02  "name": "Vali",
03  "age": 30,
04  "isActive": true
05}

Explanation

JSON.stringify(object, replacer, space) — uchinchi argument (2) — har bir daraja uchun nechta bo'shliq qo'yishni belgilaydi, bu natijani o'qish uchun qulay qiladi.

19.3 JSON.parse() — JSON string'ni object'ga aylantirish

Simple Explanation

JSON.parse() — JSON.stringify()ning teskarisi: JSON formatidagi string'ni qayta JavaScript object'ga aylantiradi.

Example

script.js
JavaScriptNusxalash
01let jsonString = '{"name":"Karim","age":28}';
02 
03let user = JSON.parse(jsonString);
04 
05console.log(user.name); // "Karim"
06console.log(typeof user); // "object"

Diagram

code.text
TEXTNusxalash
01JavaScript Object  →  JSON.stringify()  →  JSON String
02       ↑                                        │
03       └──────────── JSON.parse() ──────────────┘

💡 Key Idea
stringify va parse — bir-birining aynan teskarisi. Ma'lumotni saqlash yoki yuborish uchun stringify, qaytadan ishlatish uchun parse ishlatiladi.

19.4 Amaliy qo'llanilish: localStorage bilan ishlash

Simple Explanation

Brauzerning localStoragesi faqat stringlarni saqlay oladi, shuning uchun object saqlash uchun uni avval JSON'ga aylantirish kerak.

Example

script.js
JavaScriptNusxalash
01let settings = { theme: "dark", fontSize: 16 };
02 
03// Saqlash
04localStorage.setItem("settings", JSON.stringify(settings));
05 
06// O'qish
07let saved = JSON.parse(localStorage.getItem("settings"));
08 
09console.log(saved.theme); // "dark"

🔗 Connection
localStorage haqida Chapter 36'da batafsil to'xtalamiz — bu yerda JSON bilan bog'liqligini ko'rish uchun misol sifatida keltirdik.

19.5 ⚠️ Qiyin mavzu: JSON.stringify() nimalarni "yo'qotadi"

Simple Explanation

JSON.stringify() barcha ma'lumot turlarini bir xilda saqlay olmaydi — ba'zi qiymatlar o'zgaradi yoki umuman yo'qoladi.

Jadval — Qanday o'zgarishlar bo'ladi

Example

script.js
JavaScriptNusxalash
01let data = {
02    name: "Test",
03    value: undefined,
04    calculate: function () { return 1; },
05    score: NaN,
06    createdAt: new Date()
07};
08 
09console.log(JSON.stringify(data));
10// {"name":"Test","score":null,"createdAt":"2026-..."}
11// value va calculate umuman yo'q!

Explanation

undefined va function'lar JSON formatida "ifodalab bo'lmaydigan" qiymatlar hisoblanadi, shuning uchun ular natijadan butunlay chiqarib tashlanadi. NaN esa sonlarga tegishli bo'lsa-da, JSON standarti uni qo'llab-quvvatlamagani uchun nullga aylanadi.

⚠️ Common Mistake
Function yoki metodlarga ega object'ni to'g'ridan-to'g'ri JSON.stringify() qilish — metodlarning "yo'qolib qolishiga" olib keladi. Agar ma'lumot va xatti-harakat (method) birga saqlanishi kerak bo'lsa, JSON bunga mos kelmaydi.

19.6 JSON.parse() da xatolikni boshqarish

Simple Explanation

Agar JSON.parse()ga noto'g'ri formatdagi string berilsa, u xatolik chiqaradi. Shuning uchun uni har doim try/catch bilan himoyalash tavsiya etiladi (Chapter 18'da o'rgangan bilim shu yerda qo'llaniladi).

Example

script.js
JavaScriptNusxalash
01let invalidJson = "{name: 'Ali'}"; // noto'g'ri format (key tirnoqsiz)
02 
03try {
04    let data = JSON.parse(invalidJson);
05} catch (error) {
06    console.log("JSON formati noto'g'ri: " + error.message);
07}

🔗 Connection
Bu — Chapter 18'da o'rgangan try/catchning amaliy qo'llanilishiga yaqqol misol: tashqi manbadan (server, localStorage, fayl) kelgan ma'lumot har doim "ishonchsiz" deb qaralishi va xavfsiz tarzda ishlov berilishi kerak.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
{ name: "Anvar", age: 24 } object'ini JSON.stringify() yordamida string'ga aylantiring va uni chiqaring.
Required Concepts:

• JSON.stringify()
  Hint:
  console.log(JSON.stringify(obj)) yozing.

🟡 Exercise 2 — Medium

Task:
Quyidagi JSON string'ni object'ga aylantirib, undagi hobbies array'ining birinchi elementini chiqaring:

script.js
JavaScriptNusxalash
01let jsonStr = '{"name":"Malika","hobbies":["rasm chizish","sayohat"]}';

Required Concepts:

• JSON.parse()
• Array indexing
  Hint:
  JSON.parse(jsonStr).hobbies[0]

🔴 Exercise 3 — Hard

Task:
saveUser(user) va loadUser() nomli ikkita function yozing: saveUser — object'ni JSON'ga aylantirib, oddiy variable'da "saqlasin" (localStorage o'rniga variable ishlatavering), loadUser esa uni qaytadan object'ga aylantirib qaytarsin. loadUserni try/catch bilan himoyalang.
Required Concepts:

• JSON.stringify(), JSON.parse()
• try/catch
  Hint:
  Global variable'da JSON string'ni saqlang, loadUser ichida uni parse qiling.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01let data = {
02    name: "Test",
03    age: undefined,
04    isActive: true
05};
06 
07let json = JSON.stringify(data);
08 
09console.log(json);

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> '{"name":"Test","isActive":true}'

Why?
age qiymati undefined, va JSON.stringify() undefined qiymatga ega propertylarni natijadan butunlay olib tashlaydi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01let userInput = "{'name': 'Ali'}"; // yagona tirnoq ishlatilgan
02 
03let user = JSON.parse(userInput);
04console.log(user.name);

Your Task:

• Kod ishga tushganda nima bo'lishini bashorat qiling.
• Nima uchun xatolik yuz berishini tushuntiring.
• Kodni ikki usulda tuzating: (a) to'g'ri JSON formatga o'tkazib, (b) try/catch bilan himoyalab.

<details> <summary>Solution</summary> Muammo: JSON standarti key va string qiymatlar uchun faqat qo'sh tirnoq (") talab qiladi, yagona tirnoq (') emas. Shuning uchun JSON.parse() xatolik beradi.

Yechim (a):

script.js
JavaScriptNusxalash
01let userInput = '{"name": "Ali"}'; // to'g'ri format
02 
03let user = JSON.parse(userInput);
04console.log(user.name); // "Ali"

Yechim (b):

script.js
JavaScriptNusxalash
01let userInput = "{'name': 'Ali'}";
02 
03try {
04    let user = JSON.parse(userInput);
05    console.log(user.name);
06} catch (error) {
07    console.log("Noto'g'ri JSON format: " + error.message);
08}

</details>

📌 Chapter Summary

• JSON — ma'lumot almashish uchun universal matn formati.
• JSON.stringify() — object'ni JSON string'ga aylantiradi.
• JSON.parse() — JSON string'ni object'ga aylantiradi.
• undefined, function'lar JSON.stringify()da yo'qoladi, NaN esa nullga aylanadi.
• JSON.parse() — noto'g'ri format bilan xatolik berishi mumkin, try/catch bilan himoyalash kerak.

🎯 Key Takeaways

• JSON'da key va string qiymatlar faqat qo'sh tirnoq bilan yoziladi.
• stringify va parse — bir-birining teskarisi.
• Function va undefined — JSON'da ifodalanmaydi, ular natijadan yo'qoladi.
• Tashqi manbadan kelgan JSON'ni har doim try/catch bilan qayta ishlang.
• localStorage, server bilan almashinuv (API) — JSON eng ko'p ishlatiladigan joylar.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01let obj = { name: "Ali", age: 25 };
02 
03let jsonStr = JSON.stringify(obj);        // object → string
04let parsed = JSON.parse(jsonStr);          // string → object
05 
06JSON.stringify(obj, null, 2);              // chiroyli formatlash
07 
08try {
09    JSON.parse(someString);
10} catch (error) {
11    console.log("Noto'g'ri JSON");
12}

---