JSON - تنسيق البيانات — JavaScript الأساسيات

JSON في JavaScript

ما هو JSON؟

JavaScript Object Notation

تنسيق نصي لتبادل البيانات.

لماذا JSON مهم؟

- تبادل البيانات مع الخوادم (APIs)

- حفظ البيانات في localStorage

- ملفات الإعدادات (package.json)

صيغة JSON

{
  "name": "أحمد",
  "age": 25,
  "isStudent": true,
  "hobbies": ["قراءة", "برمجة"],
  "address": {
    "city": "بغداد"
  }
}

القواعد المهمة

- المفاتيح يجب أن تكون بين علامات تنصيص

- النصوص بين علامات تنصيص مزدوجة فقط

- لا تعليقات

- لا فاصلة بعد آخر عنصر

التحويل في JavaScript

من Object إلى JSON (Stringify)

const obj = { name: "أحمد", age: 25 };
const json = JSON.stringify(obj);
// '{"name":"أحمد","age":25}'

من JSON إلى Object (Parse)

const json = '{"name":"أحمد","age":25}';
const obj = JSON.parse(json);
// { name: "أحمد", age: 25 }

استخدام مع localStorage

// حفظ
const user = { name: "أحمد" };
localStorage.setItem("user", JSON.stringify(user));

// قراءة
const saved = JSON.parse(localStorage.getItem("user"));

// ===== JSON.stringify - تحويل لنص =====
const user = {
  name: "أحمد",
  age: 25,
  skills: ["JavaScript", "React"],
  isActive: true
};

const jsonString = JSON.stringify(user);
console.log(jsonString);
// {"name":"أحمد","age":25,"skills":["JavaScript","React"],"isActive":true}

// مع تنسيق (للقراءة)
const formatted = JSON.stringify(user, null, 2);
console.log(formatted);
/*
{
  "name": "أحمد",
  "age": 25,
  "skills": [
    "JavaScript",
    "React"
  ],
  "isActive": true
}
*/


// ===== JSON.parse - تحويل لـ Object =====
const jsonData = '{"name":"سارة","age":22,"city":"بغداد"}';
const person = JSON.parse(jsonData);

console.log(person.name);  // سارة
console.log(person.age);   // 22


// ===== استخدام عملي: localStorage =====
// حفظ سلة التسوق
const cart = [
  { id: 1, name: "هاتف", price: 500 },
  { id: 2, name: "سماعات", price: 50 }
];

localStorage.setItem("cart", JSON.stringify(cart));

// استرجاع السلة
const savedCart = JSON.parse(localStorage.getItem("cart")) || [];
console.log(savedCart);


// ===== معالجة الأخطاء =====
function safeParseJSON(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error("JSON غير صالح:", error.message);
    return null;
  }
}

// اختبار
safeParseJSON('{"valid": true}');  // ✅ يعمل
safeParseJSON('{invalid}');         // ❌ خطأ - يرجع null


// ===== نسخ كائن (Deep Copy) =====
const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));

copy.b.c = 99;
console.log(original.b.c); // 2 (لم يتغير)