جاري التحميل...

العمل مع JSON

الدرس السابق كان يقلب شكل النداء فقط، وthis يتبع ذلك النداء. هذه الصفحة تترك ذلك جانبًا. السلعة ما زالت في الذاكرة، والاسم والسعر على الكائن نفسه. إن أردت تسليم هذه الوقائع إلى ملف أو برنامج آخر أو صفحة لاحقة، فأنت تحتاج نصًا له عقد واضح. اسم هذا النص JSON.

الكائن الحي ليس هذه المذكرة

ما دام السكربت يعمل، يبقى الحرفي في مكانه ويمكنك وضع دالة عليه، وthis ما زال يتبع شكل النداء كما في الدرس السابق. JSON مجرد سلسلة: لا دوال فيها، ولا تختار this بنفسها.

ماذا يُسمح للنص أن يحمل

📊 الكائن الحي مقابل نص JSON

الجزء حرفي الكائن نص JSON
اقتباس المفتاح اختياري اقتباس مزدوج إلزامي
اقتباس السلسلة مفرد أو مزدوج مزدوج فقط
الفاصلة الأخيرة مسموحة ممنوعة
الدالة يمكن أن تكون دالة كائن يحذفها stringify، وكتابتها داخل النص غير صالحة
حقل undefined قيمة حقيقية يُحذف حين يمشي stringify على الكائن

لا تنقل عادات الحرفي إلى هذا النص. كل مفتاح وكل سلسلة يحتاج علامة اقتباس مزدوجة. الفاصلة الزائدة في آخر السطر، والتعليق داخل النص، والدالة العارية، كلها ليست JSON صالحًا. الجدول يبيّن أي عادة تُحذف وأيها يرفضها parse أصلًا.

stringify يكتب المذكرة

javascript 
let product = {
name: "Mug",
price: 12
};
console.log(JSON.stringify(product));

stringify يكتب المذكرة

JSON.stringify يمشي على الحقول البسيطة ويعيد سلسلة واحدة، والكونسول يعرض {"name":"Mug","price":12} بينما product نفسه لا يتغير. الاسم ما زلت تقرأه من الكائن الحي فتحصل على Mug. السلسلة قيمة مستقلة يمكنك حفظها أو إرسالها.

parse يبني قيمة

javascript 
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
console.log(product.name);

parse يبني قيمة من المذكرة

text ما زال سلسلة، بعلامات الاقتباس والأقواس. JSON.parse يبني من هذا النص كائنًا جديدًا. بعد ذلك يصبح product.name مساويًا لـ Mug. لا استدعاء دالة هنا ولا دور لـ this.

قائمة داخل المذكرة

javascript 
let text = '{"name":"Mug","tags":["ceramic","gift"]}';
let product = JSON.parse(text);
console.log(product.tags[0]);

القائمة يمكن أن تسكن داخل المذكرة

نص JSON يستطيع حمل مصفوفة، وبعد parse يصبح product.tags مصفوفة حقيقية وأول خانة فيها ceramic. المصفوفة موضوع الدرس القادم، وهنا هي مجرد حمولة داخل النص.

المذكرة تترك السلوك

javascript 
let product = {
name: "Mug",
price: undefined,
tag() {
return this.name;
}
};
console.log(JSON.stringify(product));

المذكرة تحفظ البيانات لا السلوك

price كان undefined. tag كانت دالة. كلاهما يختفي من النص. المطبوع هو {"name":"Mug"} فقط. السلوك يبقى على الكائن الحي ولا يدخل المذكرة.

اقتباس مرتخٍ لا يُحلَّل

javascript 
let text = "{name:'Mug'}";
try {
JSON.parse(text);
console.log("ok");
} catch (err) {
console.log("bad text");
}

المذكرة المرتخية لا تُحلَّل

الاقتباس المفرد والمفتاح بلا اقتباس مسموحان في حرفي الكائن وممنوعان في JSON، لذلك يرمي JSON.parse خطأ وتطبع كتلة catch العبارة bad text بدل أن تتعطل الصفحة في هذا العرض. أصلح النص باقتباس مزدوج على المفتاح وعلى السلسلة. هذا ليس درس الأخطاء اللاحق، بل يبيّن فقط أن JSON التالف يوقف parse.

إذا عرفت الاتجاه عرفت الأداة

من الذاكرة إلى النص تمضي بـ stringify، ومن النص إلى القيمة تعود بـ parse. إن احتجت دالة على السلعة لاحقًا فأضفها بعد parse لأن المذكرة لم تحمل الدالة معها. this ما زال يعتمد على شكل النداء لا على JSON، والدرس التالي هو المصفوفات: قائمة حية في السكربت، لا قاعدة JSON جديدة.

اعرض حقلًا واحدًا من المذكرة

حلّل سلسلة سلعة صغيرة. اكتب الاسم في الفقرة. لا تبنِ الكائن بأقواس داخل السكربت.

عرض الصفحة — الاسم من المذكرة

html 
<!DOCTYPE html>
<html>
<head>
<title>json — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
let box = document.getElementById("line");
box.textContent = product.name;
</script>
</body>
</html>

تُظهر الفقرة Mug لأن السكربت حلّل النص ولم يبنِ حرفي كائن. غيّر الاسم داخل السلسلة ثم حدّث الصفحة فيتبع السطر الاسم الجديد.

خطوات التدريب

  1. نفّذ stringify على الكوب واقرأ النص المقتبس، ثم parse للشكل نفسه حتى ترى Mug.
  2. حلّل المذكرة التي فيها tags واقرأ ceramic.
  3. نفّذ stringify على كائن فيه دالة وسعر undefined حتى يبقى name فقط، وضع مذكرة بمفتاح بلا اقتباس داخل try / catch ليُطبع bad text.
  4. في مثال HTML غيّر الاسم داخل السلسلة فقط، حدّث، واقرأ الفقرة.

زلات شائعة

  • معاملة نص JSON كأنه حرفي كائن، وتمرير اقتباس مفرد أو مفتاح عارٍ إلى parse
  • توقع أن تنجو الدالة أو undefined من stringify
  • استدعاء parse حين كنت تريد نصًا، أو stringify والنص جاهز أصلًا، ثم قراءة الاسم من السلسلة نفسها بدل القيمة التي بناها parse
  • ظنّ أن الصفحة التالية ما زالت JSON، بينما المصفوفة قائمة حية

الخلاصة

  • JSON نص يصف البيانات وstringify يحوّل الكائن البسيط إلى ذلك النص
  • parse يعيد النص إلى قيمة
  • المفتاح والسلسلة يحتاجان اقتباسًا مزدوجًا، والفاصلة الزائدة أو الاقتباس المفرد يُسقط parse
  • الدالة وحقل undefined يُحذفان من النص
  • حقل بعد parse يستطيع ملء سطر في الصفحة، والدرس التالي المصفوفات، قائمة حية داخل السكربت

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 37 من 38
Javascript درس تعليمي