التعامل مع بيانات JSON (JSON Parse & Stringify)

json javascriptjson.parse json.stringifyالتعامل مع jsonjson parsing errorjson format

جدول مرجعي سريع

الدالة	الاتجاه	الاستخدام
JSON.stringify()	كائن JS → نص JSON	إرسال بيانات أو تخزينها
JSON.parse()	نص JSON → كائن JS	استقبال بيانات من خادم أو تخزين

الشرح

JSON اختصار لـ JavaScript Object Notation، وهو صيغة نصية خفيفة لتمثيل البيانات المُهيكلة، مبنية أصلاً على صيغة كائنات جافاسكريبت لكنها أصبحت معياراً عالمياً مستقلاً عن اللغة تماماً، وتُستخدم في كل لغات البرمجة تقريباً لتبادل البيانات بين الأنظمة المختلفة — خاصة بين المتصفح والخادم عبر واجهات برمجية (APIs).

من المهم فهم أن JSON مجرد نص (String) في جوهره، وليس كائن JavaScript فعلي — رغم تشابه صياغته الكبير مع كائنات JS. توجد قواعد صارمة لصياغة JSON صحيح: أسماء المفاتيح يجب أن تكون بين علامات اقتباس مزدوجة دائماً (وليست مفردة)، لا يمكن تضمين دوال (Functions) أو undefined أو Symbol كقيم، ولا يُسمح بفاصلة زائدة بعد آخر عنصر في مصفوفة أو كائن.

JSON.stringify() تُحوّل كائن أو مصفوفة جافاسكريبت حقيقية إلى نص JSON — ضرورية عند إرسال بيانات للخادم عبر fetch، أو عند التخزين في localStorage كما تعلمنا سابقاً. تقبل الدالة وسيطين اختياريين إضافيين مفيدين جداً: دالة "استبدال" (Replacer) للتحكم في الخصائص المُضمَّنة، ورقم أو نص "مسافة بادئة" (Indentation) لتنسيق الناتج بشكل مقروء للعين البشرية (مفيد جداً عند طباعته للتصحيح).

JSON.parse() تعكس العملية تماماً — تُحوّل نص JSON (مثل ما تستلمه من استجابة خادم) إلى كائن أو مصفوفة جافاسكريبت حقيقية يمكن التعامل معها ببرمجية عادية. إذا كان النص الممرَّر لها ليس JSON صحيحاً (كوجود خطأ إملائي في الصياغة)، تُلقي خطأ SyntaxError فوراً، لذا من الممارسات الجيدة دائماً تغليف استدعاءها بـ try...catch عند التعامل مع بيانات مصدرها غير مضمون تماماً.

الصياغة (Syntax)

syntax

1	const مستخدم = { اسم: "علي", عمر: 30, نشط: true };
2
3	const نص_json = JSON.stringify(مستخدم);
4	console.log(نص_json); // '{"اسم":"علي","عمر":30,"نشط":true}'
5
6	const كائن_من_json = JSON.parse(نص_json);
7	console.log(كائن_من_json.اسم); // "علي"
8
9	// تنسيق مقروء بمسافة بادئة
10	console.log(JSON.stringify(مستخدم, null, 2));

أمثلة عملية

مثال 1: تحليل آمن لـ JSON مع try...catch

تحليل آمن لـ JSON مع try...catch

1	// معالجة آمنة لـ JSON.parse مع بيانات غير مضمونة
2	function تحليل_آمن(نص) {
3	try {
4	return JSON.parse(نص);
5	} catch (خطأ) {
6	console.error("نص JSON غير صالح:", خطأ.message);
7	return null;
8	}
9	}
10
11	console.log(تحليل_آمن('{"صحيح": true}')); // { صحيح: true }
12	console.log(تحليل_آمن("نص عشوائي غير صالح")); // null، مع رسالة خطأ واضحة

مثال 2: استخدام دالة Replacer لاستبعاد بيانات حساسة

استخدام دالة Replacer لاستبعاد بيانات حساسة

1	// استخدام Replacer لاستبعاد خصائص حساسة عند التحويل
2	const مستخدم = { اسم: "سارة", بريد: "s@e.com", كلمة_المرور: "سري123" };
3
4	const json_آمن = JSON.stringify(مستخدم, (مفتاح, قيمة) => {
5	if (مفتاح === "كلمة_المرور") return undefined; // استبعاد هذه الخاصية
6	return قيمة;
7	});
8	console.log(json_آمن); // بدون كلمة المرور نهائياً

نصائح احترافية

—JSON مجرد نص وليس كائن JS فعلي — مفاتيحه دائماً بين علامات اقتباس مزدوجة إلزامياً، بعكس كائنات JS المرنة.
—لف JSON.parse() دائماً بـ try...catch عند التعامل مع بيانات من مصدر غير مضمون (كمدخلات مستخدم أو استجابة خارجية).
—JSON.stringify(كائن, null, 2) يمنحك تنسيقاً مقروءاً بمسافات بادئة، مفيد جداً أثناء التصحيح والعرض.
—لا يمكن تحويل الدوال أو undefined أو Symbol إلى JSON — تُستبعد تلقائياً بصمت عند استخدام stringify.

الدرس السابق

التخزين المحلي والمؤقت في المتصفح (Local Storage & Session Storage)

الدرس التالي

الوحدات البرمجية وتصدير الأكواد (ES6 Modules: import & export)

الدالة

الاتجاه

الاستخدام

JSON.stringify()

كائن JS → نص JSON

إرسال بيانات أو تخزينها

JSON.parse()

نص JSON → كائن JS

استقبال بيانات من خادم أو تخزين