فصل ۲۱: کار با داده‌های JSON و ارتباط با سرور در جاوااسکریپت

مقدمه: JSON چیست؟

JSON (مخفف JavaScript Object Notation) یک فرمت متنی برای تبادل داده است که ساده و قابل فهم برای انسان و ماشین‌هاست.
امروزه تقریباً تمام ارتباطات بین وب‌سایت‌ها و سرورها (مثل دریافت آب‌وهوا، ارسال فرم، چت و …) با JSON انجام می‌گیرد.

مثال ساده یک دادهٔ JSON:

{
  "name": "محمد",
  "age": 21,
  "skills": ["JavaScript", "HTML", "CSS"]
}

– ساختارش شبیه آبجکت جاوااسکریپت است، فقط همه کلیدها در کوتیشن (” “) هستند.

چرا JSON مهم است؟

• سبک، سریع و قابل حمل است.
• اکثر زبان‌های برنامه‌نویسی (حتی PHP و پایتون) از آن پشتیبانی می‌کنند.
• انتقال داده بین کلاینت (مرورگر کاربر) و سرور را ساده می‌کند.

---

تبدیل JSON به Object و برعکس در جاوااسکریپت

۱. تبدیل JSON به شیء جاوااسکریپت (parse)

وقتی یک رشتهٔ JSON دریافت می‌کنید (مثلاً از سرور)، باید آن را به یک آبجکت تبدیل کنید:

let jsonString = '{"name":"Sara", "age":20}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // خروجی: Sara

۲. تبدیل آبجکت جاوااسکریپت به JSON (stringify)

گاهی باید یک شیء را برای ارسال به سرور به JSON تبدیل کنید:

let user = {name: "Ali", married: false};
let json = JSON.stringify(user); // خروجی: '{"name":"Ali","married":false}'
console.log(json);

---

ارتباط با سرور: دریافت و ارسال داده با fetch

چرا باید fetch را بشناسیم؟

مدرن‌ترین و ساده‌ترین روش ارتباط (ارسال/دریافت) داده با سرور در جاوااسکریپت فانکشن fetch است.

مثال: گرفتن داده از یک API (دریافت آب‌وهوا به صورت فرضی)

fetch('https://api.weatherapi.com/v1/current.json?key=demo&q=Tehran')
  .then(response => response.json())
  .then(data => {
    console.log(data.current.temp_c); // دمای تهران
  })
  .catch(error => {
    console.log("خطا:", error);
  });

توضیح:

• fetch یک دادهٔ promise برمی‌گرداند، بنابراین باید از then/catch یا async/await استفاده کنید.
• با متد .json() بدنهٔ جواب را به آبجکت جاوااسکریپت تبدیل می‌کنید.

---

ارسال داده به سرور (POST)

let userData = { name: "Sara", age: 24 };

fetch('https://example.com/api/users', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify(userData)
})
  .then(response => response.json())
  .then(data => {
    console.log("پاسخ سرور:", data);
  });

---

نکات مهم فصل:

• همیشه هنگام ارسال داده به سرور، آن را با JSON.stringify() به رشته تبدیل کنید.
• برای خواندن جواب، معمولاً باید .json() فراخوانی شود.
• اکثر APIها با JSON کار می‌کنند؛ حتماً به تنظیم هدر "Content-Type" توجه کنید.

---

سوالات متداول

۱. چه تفاوتی بین JSON و آبجکت جاوااسکریپت است؟
JSON فقط یه رشته متنی است، ولی آبجکت‌ها ساختار داده‌ی جاوااسکریپت هستند.

۲. آیا می‌توانم فایل JSON را مستقیم با fetch بارگذاری کنم؟
بله! فقط کافی است آدرس فایل یا API را وارد کنید.

۳. اگر داده عدد یا boolean بود، باز هم JSON است؟
در JSON علاوه‌بر آبجکت و آرایه، مقدار عدد، بولین (true/false)، null و رشته هم معتبرند.

---

آسان‌ترین تمرین

• یک آبجکت بسازید، با JSON.stringify به رشته تبدیلش کنید، بعد دوباره با JSON.parse به آبجکت برگردونید!
• یک آدرس API عمومی را با fetch دریافت کنید (مثلاً https://jsonplaceholder.typicode.com/users).