ما هو 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}';
JavaScriptJSON عبارة عن نص (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}'
JavaScript2. التحويل من 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 مجانية للتجربة والتعلم
- JSONPlaceholder
🔗 https://jsonplaceholder.typicode.com
API وهمية توفر بيانات مثل المستخدمين والمنشورات والتعليقات.
- Reqres
🔗 https://reqres.in
API مجانية لتجربة تسجيل الدخول وعمليات CRUD.
- Fake Store API
🔗 https://fakestoreapi.com
توفر بيانات متجر وهمي (منتجات، مستخدمين، سلة المشتريات).
- OpenWeatherMap API
🔗 https://openweathermap.org/api
للحصول على بيانات الطقس. تحتاج إلى API Key مجاني.
- TheDogAPI
🔗 https://thedogapi.com
API لعرض صور وسلالات الكلاب.
- TheCatAPI
🔗 https://thecatapi.com
API لعرض صور وسلالات القطط.
- PokeAPI
🔗 https://pokeapi.co
API يحتوي على بيانات شاملة عن عالم البوكيمون.
- REST Countries
🔗 https://restcountries.com
بيانات عن جميع دول العالم (اللغة، العملة، عدد السكان، العلم…).
- 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"
}
JavaScriptJSON في 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 | ✅ |