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