JSON

ما هو JSON؟

JSON اختصار لـ JavaScript Object Notation، وهو تنسيق لتبادل البيانات (Data Format) يُستخدم لتخزين البيانات وتبادلها بين السيرفر والمتصفح، أو بين الأنظمة بشكل عام.

  • مستوحى من كائنات JavaScript (Objects).
  • يستخدم نصًا بسيطًا (Text) لتمثيل البيانات.
  • يمكن قراءته وكتابته بسهولة من قبل البشر والآلات.

تركيب JSON:

{
  "name": "Ali",
  "age": 25,
  "isStudent": false,
  "skills": ["HTML", "CSS", "JavaScript"],
  "address": {
    "city": "Riyadh",
    "zip": "12345"
  }
}
JavaScript

قواعد JSON:

العنصرالصيغة
كائن (Object)محصور بـ {} ويحتوي على أزواج مفتاح:قيمة
مصفوفة (Array)محصورة بـ []
المفتاح (Key)دائمًا يكون نص (String) بين علامات اقتباس “”
القيم (Value)يمكن أن تكون: String, Number, Boolean, Object, Array, null

الفرق بين كائن JavaScript و JSON

// JavaScript Object
let user = {
  name: "Ali",
  age: 25
};

// JSON
let jsonString = '{"name": "Ali", "age": 25}';
JavaScript

JSON عبارة عن نص (String) بينما الكائن العادي في JavaScript يمكن استخدامه مباشرة.

JSON لايقبل التعليقات

التحويل بين JavaScript و JSON
1. التحويل من كائن JavaScript إلى JSON (تسلسل – Serialization)
let person = {
  name: "Sara",
  age: 30,
  married: true
};

let json = JSON.stringify(person);
console.log(json); // => '{"name":"Sara","age":30,"married":true}'
JavaScript
2. التحويل من JSON إلى كائن JavaScript (تفكيك – Parsing)
let jsonString = '{"name":"Sara","age":30,"married":true}';

let obj = JSON.parse(jsonString);
console.log(obj.name); // => Sara
JavaScript

توابع JSON الأساسية

تابعالوظيفة
JSON.stringify()يحوّل كائن JavaScript إلى JSON (نص)
JSON.parse()يحوّل JSON (نص) إلى كائن JavaScript
أمثلة واقعية

شرح واستعراض بعض نماذج من Api

✅ قائمة مواقع API مجانية للتجربة والتعلم
  1. JSONPlaceholder
    🔗 https://jsonplaceholder.typicode.com
    API وهمية توفر بيانات مثل المستخدمين والمنشورات والتعليقات.

  1. Reqres
    🔗 https://reqres.in
    API مجانية لتجربة تسجيل الدخول وعمليات CRUD.

  1. Fake Store API
    🔗 https://fakestoreapi.com
    توفر بيانات متجر وهمي (منتجات، مستخدمين، سلة المشتريات).

  1. OpenWeatherMap API
    🔗 https://openweathermap.org/api
    للحصول على بيانات الطقس. تحتاج إلى API Key مجاني.

  1. TheDogAPI
    🔗 https://thedogapi.com
    API لعرض صور وسلالات الكلاب.

  1. TheCatAPI
    🔗 https://thecatapi.com
    API لعرض صور وسلالات القطط.

  1. PokeAPI
    🔗 https://pokeapi.co
    API يحتوي على بيانات شاملة عن عالم البوكيمون.

  1. REST Countries
    🔗 https://restcountries.com
    بيانات عن جميع دول العالم (اللغة، العملة، عدد السكان، العلم…).

  1. Public APIs (أكبر دليل API مجانية)
    🔗 https://public-apis.io
    🔗 https://github.com/public-apis/public-apis
    مستودع ضخم يحتوي على الآلاف من APIs المجانية المصنفة حسب الفئات.
استرجاع بيانات من API على شكل JSON:
fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(users => {
    users.forEach(user => console.log(user));
  })
  .catch(err => console.error("Error:", err));
JavaScript

خيارات إضافية لـ JSON.stringify

let user = {
  name: "Ahmed",
  age: 28,
  password: "secret"
};

// تجاهل خصائص معينة (مثل password)
let json = JSON.stringify(user, ["name", "age"]);
console.log(json); // {"name":"Ahmed","age":28}
JavaScript

تنسيق JSON لسهولة القراءة (pretty-print):

let jsonFormatted = JSON.stringify(user, null, 2);
console.log(jsonFormatted);
JavaScript
{
  "name": "Ahmed",
  "age": 28,
  "password": "secret"
}
JavaScript

JSON في LocalStorage:

let product = { id: 1, name: "Laptop" };

// تخزين
localStorage.setItem("product", JSON.stringify(product));

// استرجاع
let data = JSON.parse(localStorage.getItem("product"));
console.log(data.name); // => Laptop
JavaScript

التعامل مع JSON المتداخل (Nested JSON)

let json = `{
  "user": {
    "name": "Khalid",
    "contacts": {
      "email": "[email protected]",
      "phone": "123456"
    }
  }
}`;

let obj = JSON.parse(json);
console.log(obj.user.contacts.email); // => [email protected]
JavaScript

ملخص سريع:

مفهوموظيفة
JSONتنسيق لتبادل البيانات (text)
stringifyيحول كائن إلى نص JSON
parseيحول نص JSON إلى كائن
key/valueدائمًا في JSON المفتاح نص والقيمة قد تكون أنواعًا متعددة
LocalStorageيُستخدم مع JSON لتخزين بيانات مؤقتة

✅ 1. التعامل مع الأخطاء عند استخدام JSON.parse

إذا حاولت تحويل نص غير صالح (invalid JSON)، فستحصل على خطأ. لذا يُفضل استخدام try...catch:

let json = '{"name": "Ali", "age": 30}';

try {
  let obj = JSON.parse(json);
  console.log(obj.name);
} catch (error) {
  console.error("JSON parsing failed:", error.message);
}
JavaScript

💡 نصيحة: استخدم try...catch دائمًا عند التعامل مع JSON قادم من مصادر خارجية (مثل API أو ملفات).

✅ 2. استخدام دالة replacer في JSON.stringify

يمكنك تخصيص طريقة التحويل إلى JSON باستخدام replacer، إما كمصفوفة لتحديد المفاتيح، أو كدالة للتحكم بالتحويل:

➤ كمصفوفة:
let user = {
  name: "Omar",
  age: 35,
  password: "secret"
};

let json = JSON.stringify(user, ["name", "age"]);
console.log(json); // {"name":"Omar","age":35}
JavaScript

➤ كدالة replacer:

let user = {
  name: "Omar",
  age: 35,
  password: "secret"
};

let json = JSON.stringify(user, (key, value) => {
  if (key === "password") return undefined;
  return value;
});

console.log(json); // {"name":"Omar","age":35}
JavaScript
✅ 3. استخدام دالة reviver في JSON.parse

دالة reviver تُستخدم لتخصيص كيفية تحويل النص إلى كائن:

let json = '{"name":"Salma","birthYear":1995}';

let obj = JSON.parse(json, (key, value) => {
  if (key === "birthYear") {
    return new Date().getFullYear() - value;
  }
  return value;
});

console.log(obj); // { name: 'Salma', birthYear: 30 } ← أصبحت العمر
JavaScript

✅ 4. التعامل مع القيم غير المدعومة في JSON

بعض القيم في JavaScript لا يمكن تحويلها إلى JSON:

النوعالنتيجة عند stringify
undefinedيتم تجاهله
functionيتم تجاهله
symbolيتم تجاهله
Dateيتحول إلى string بصيغة ISO
NaN, Infinityتتحول إلى null
Map, Setلا تُحوّل تلقائيًا، يجب تحويلها يدويًا
let data = {
  name: "Amin",
  greet: function () { console.log("Hi"); },
  score: undefined,
  symbol: Symbol("id"),
  date: new Date(),
  number: NaN
};

console.log(JSON.stringify(data));
JavaScript

الإخراج:

{"name":"Amin","date":"2025-05-29T09:30:00.000Z","number":null}
JavaScript

✅ 5. استخدام JSON كـ Deep Clone (نسخة عميقة)

let original = { name: "Yousef", skills: ["JS", "PHP"] };

let clone = JSON.parse(JSON.stringify(original));

clone.skills.push("Python");

console.log(original.skills); // ["JS", "PHP"]
console.log(clone.skills);    // ["JS", "PHP", "Python"]
JavaScript

⚠️ تحذير: هذا الأسلوب لا يعمل إذا كان الكائن يحتوي على توابع (functions) أو خصائص غير قابلة للتحويل مثل Date, Map, Set, إلخ.

✅ 6. ملفات JSON (في المشاريع)

في المشاريع (مثلاً Node.js أو React)، يمكن قراءة ملفات .json واستيرادها:

➤ في Node.js:
const data = require('./data.json');
console.log(data);
JavaScript

➤ في React (من Webpack أو Vite):

import data from './data.json';
console.log(data);
JavaScript

✅ 7. استخدام JSON في AJAX (القديم بدون fetch)

let xhr = new XMLHttpRequest();
xhr.open("GET", "data.json");
xhr.onload = function () {
  if (xhr.status === 200) {
    let obj = JSON.parse(xhr.responseText);
    console.log(obj);
  }
};
xhr.send();
JavaScript
✅ 8. التعامل مع JSON داخل Forms

أحيانًا نحتاج لتحويل البيانات المدخلة في نموذج HTML إلى JSON:

let form = document.querySelector("form");

form.addEventListener("submit", function (e) {
  e.preventDefault();

  let formData = new FormData(form);
  let obj = {};

  formData.forEach((value, key) => {
    obj[key] = value;
  });

  let json = JSON.stringify(obj);
  console.log(json);
});
JavaScript
✅ 9. التحقق من صحة JSON قبل استخدامه

لا توجد دالة مباشرة للتحقق، لكن يمكنك استخدام try...catch:

function isValidJSON(str) {
  try {
    JSON.parse(str);
    return true;
  } catch {
    return false;
  }
}

console.log(isValidJSON('{"name":"Lina"}')); // true
console.log(isValidJSON('{name:"Lina"}'));   // false (الاسم ليس بين "")
JavaScript
✅ 10. أدوات مساعدة (خارج الجافاسكربت)
  • https://jsonlint.com/ ← لفحص صحة ملفات JSON.
  • إضافات المتصفح (JSON Formatter) لتحسين عرض JSON.

📌 الخلاصة النهائية:

مهارة/موضوعهل تم شرحها؟ ✅
ما هو JSON✅
الفرق بين JSON و Object✅
stringify و parse✅
replacer / reviver✅
JSON في API و LocalStorage✅
الملفات و القراءة✅
التعامل مع الأخطاء✅
clone عميق باستخدام JSON✅
قيود stringify (date, NaN)✅
التحقق من صحة JSON✅