معرفة الفرق بين JSON.parse و JSON.stringify

الإنترنت والملفات لا تستوعب الكائنات والمصفوفات البرمجية، بل النصوص فقط، لذلك نحن بحاجة دائماً للتحويل بين كائن جافاسكريبت حقيقي ونص مكتوب بتنسيق JSON.

بمعنى شبكة الإنترنت (بروتوكولات مثل HTTP/TCP) وأقراص التخزين (الملفات، localStorage) لا تفهم عناوين الذاكرة، بل تفهم فقط دفقاً خطياً من البيانات (Linear Stream of Bytes/Characters) أي سلسلة مسطحة من البايتات أو الحروف المكتوبة وراء بعضها البعض.

وفي حال الخادم مبرمج بلغة أخرى مثل بايثون أو Java، فلغة بايثون لا تفهم كائنات جافاسكريبت الداخلية، لكنها تفهم قراءة النصوص وتحليلها.

كلمة Stringify تعني بالإنجليزية تحويل الشيء إلى نص، نمرر لها كائن جافاسكريبت أو مصفوفة، وتحولها إلى نص مكتوب بقواعد JSON.

const user = {
  name: "أحمد",
  age: 25
};

const jsonString = JSON.stringify(user);


console.log(jsonString);  // الناتج سيكون نصاً: '{"name":"أحمد","age":25}'


console.log(typeof jsonString); 

نستخدمها لإرسال بيانات إلى الخادم، فعند إرسال بيانات من المتصفح عبر طلب POST أو PUT، يجب تحويل الكائن إلى نص JSON ليتمكن الخادم من استلامه عبر شبكة الإنترنت.

وميزة localStorage في المتصفح لا تقبل حفظ كائنات، تقبل نصوصاً فقط، لذا يجب عمل stringify للكائن قبل حفظه.

كلمة Parse تعني حلل وافهم النص، وهي تستقبل نص مكتوب بتنسيق JSON، وتقوم بتحليله وإعادة بنائه ليصبح كائن جافاسكريبت حقيقي، ويمكنك الوصول لعناصره عبر النقطة . أو الأقواس []

const jsonString = '{"name":"أحمد","age":25}';

const userObj = JSON.parse(jsonString);

console.log(userObj); 
// الناتج: { name: 'أحمد', age: 25 }

console.log(userObj.name); 
// النتيجة: أحمد (أصبح بإمكاننا قراءة الخصائص ككائن عادي)

console.log(typeof userObj); 

ونستخدمها في حال أرسل لك الخادم بيانات بصيغة نصية، تحتاج لعمل parse لها حتى تستطيع التعامل معها ككائن وتستخرج منه البيانات لعرضها في المتصفح.

أيضاً عندما تسترجع نصاً كنت قد حفظته مسبقاً في localStorage ، تحوله مجدداً لكائن لتستخدمه داخل تطبيقك.

مثال:

const settings = {
  theme: "dark",
  fontSize: 16
};

const settingsText = JSON.stringify(settings);
localStorage.setItem("userSettings", settingsText);

const savedText = localStorage.getItem("userSettings");

const savedSettings = JSON.parse(savedText);

console.log(savedSettings.theme);

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

JSON.stringify (تغليف البيانات) :

هذه الأداة تأخذ الكائنات (Objects) أو المصفوفات (Arrays) الخاصة بك في جافا سكريبت وتحولها إلى نص عادي (String) وهذا النص هو الصندوق الذي يحتوي على بياناتك.

و نستخدمها :

1. عند إرسال بيانات من متصفحك إلى خادم (Server). فالخادم لا يفهم كائنات ومتغيرات جافا سكريبت مباشرة، بل يفهم النصوص .
2. عند حفظ البيانات في ذاكرة المتصفح المحلية (localStorage) وهذا لأنها لا تقبل تخزين أي شيء سوى النصوص.

مثال :

const user = { name: "أحمد", age: 25 };
// الكائن هنا قابل للاستخدام في الكود، لكن لا يمكن إرساله أو تخزينه كما هو

const jsonText = JSON.stringify(user);
console.log(jsonText); 
// النتيجة: '{"name":"أحمد","age":25}' (أصبح نصاً عادياً يمكن إرساله)

JSON.parse (استخراج البيانات):

هذه الأداة تفعل العكس تماما فإنها تأخذ الصندوق (النص المكتوب بصيغة JSON) وتفتحه لتعيد بناء الكائن أو المصفوفة الأصلية حتى تتمكن من استخدامها والتعديل عليها وقراءة خصائصها داخل كود جافا سكريبت.

و نستخدمها :

1. عند استقبال بيانات من خادم (API). فالبيانات تصل كنص ونحن نحتاج لتحويلها إلى كائن لتتمكن من قراءة محتوياتها .
2. عند استرجاع البيانات التي حفظتها مسبقا في localStorage.

مثال :

const receivedText = '{"name":"أحمد","age":25}';
// هذا نص عادي، لو حاولت قراءة receivedText.name ستحصل على خطأ أو undefined

const userObject = JSON.parse(receivedText);
console.log(userObject.name); 
// النتيجة: أحمد (عاد كائناً حقيقياً يمكن التعامل معه برمجياً)

هناك ملاحظة مهمة إضافة لما سبق شرحه أنه يجبالتعامل مع الأخطاء عند JSON.parse فإذا كان النص غير صالح بصيغة JSON، ترمي الدالة خطأ SyntaxError ويتوقف تنفيذ الكود إن لم تتعامل معه:

try {
  const obj = JSON.parse(receivedText);
} catch (error) {
  console.error("النص المستلم ليس بصيغة JSON صحيحة:", error);
}

هذا مهم جداً عند التعامل مع استجابات API حقيقية، لأن الخادم قد يرجع أحياناً HTML أو رسالة عادية بدلاً من JSON.

JSON هو تنسيق نصي (نص عادي) نستخدمه لتخزين أو إرسال البيانات. المشكلة أن جافاسكريبت تتعامل مع كائنات ومصفوفات (objects/arrays) في الذاكرة، بينما JSON هو مجرد نص (string). فنحتاج طريقة للتحويل بين الاثنين.

JSON.stringify من كائن جافاسكريبت إلى نص JSON

يأخذ كائن أو مصفوفة في جافاسكريبت ويحوّلها إلى نص (string).

const user = { name: "أحمد", age: 25 };

const jsonText = JSON.stringify(user);
console.log(jsonText); 
// '{"name":"أحمد","age":25}'  <- هذا الآن نص، وليس كائن
console.log(typeof jsonText); // "string"

تستخدمه عندما

1. تريد إرسال بيانات إلى خادم (server) عبر API الشبكة تنقل نصوصاً فقط، لا تنقل كائنات جافاسكريبت مباشرة.
2. تريد حفظ بيانات في localStorage (الذي يخزن نصوصاً فقط).
3. تريد طباعة كائن بشكل مقروء لغرض التصحيح (debugging).

JSON.parse من نص JSON إلى كائن جافاسكريبت

عكس العملية تماماً: يأخذ نص JSON ويحوّله إلى كائن أو مصفوفة يمكنك التعامل معها في الكود.

const jsonText = '{"name":"أحمد","age":25}';

const user = JSON.parse(jsonText);
console.log(user.name); // "أحمد"
console.log(typeof user); // "object"

تستخدمه عندما

1. تستقبل بيانات من خادم (استجابة API) وتكون على شكل نص JSON، وتريد الوصول لخصائصها مثل data.name.
2. تقرأ بيانات محفوظة سابقاً من localStorage.