دليل تعليمي حول العمل مع JSON.parse() و JSON.stringify()

Hark Labs2022-04-28 · 4 min read

دليل تعليمي حول العمل مع JSON.parse() و JSON.stringify()

JSON تعني JavaScript Object Notation. وتُستخدم لوصف JavaScript كائنات. وهي صيغة لمشاركة البيانات تحدد قيم البيانات باستخدام أزواج المفاتيح والقيم. كائن JSON مدعوم في جميع المتصفحات الرئيسية. يتطلب هذا البرنامج التعليمي أن تكون على دراية بـ JavaScript والعمل مع كائن JSON. للتعرف على JSON، يمكنك إلقاء نظرة على نظرة عامة على صيغة مشاركة بيانات JSON. يمكنك أيضًا الاطلاع على كيفية العمل مع JSON في JavaScript.

تُستخدم صيغة JSON أيضًا لنقل البيانات عبر الشبكة. لهذا الغرض، يجب تسلسل البيانات وإلغاء تسلسلها. عندما تكون البيانات بصيغة JSON، يتم تحويلها إلى سلسلة نصية باستخدام طريقة stringify . ولتحويل البيانات مرة أخرى إلى صيغة الكائن لمعالجتها، تُستخدم طريقة parse . سيتناول هذا البرنامج التعليمي خطوات استخدام JSON.parse() و JSON.stringify(). فلنبدأ!

JSON.parse()

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

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

الكود:

let json_string = '{"message":"Done with success", "status":200, "code":200}'
let server_obj = JSON.parse(json_string);
console.log(server_obj)

let json_string = '{"message":"Done with success", "status":200, "code":200}'

let server_obj = JSON.parse(json_string);

console.log(server_obj)

المخرجات:

{message: 'Done with success', status: 200, code: 200}

1	{message: 'Done with success', status: 200, code: 200}

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

الكود:

let string = '{"name":"XYZ","email":"xyz@example.com"}';
let obj = JSON.parse(string, (key, value) => {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
return value;
});

console.log(obj)

let string = '{"name":"XYZ","email":"xyz@example.com"}';

let obj = JSON.parse(string, (key, value) => {

if (typeof value === 'string') {

return value.toUpperCase();

}

return value;

});

console.log(obj)

المخرجات:

{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

1	{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

JSON.stringify()

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

الكود:

let obj = {message:"Done with success", status:200, code:200}
let str = JSON.stringify(obj);
console.log(str);

let obj = {message:"Done with success", status:200, code:200}

let str = JSON.stringify(obj);

console.log(str);

المخرجات:

{"message":"Done with success","status":200,"code":200}

1	{"message":"Done with success","status":200,"code":200}

يمكن لطريقة stringify أن تأخذ معاملين: طريقتي replacer و spacer. ويمكن استخدام طريقة replacer لاستبدال أو استبعاد أي قيم في السلسلة النصية.

الكود:

let obj = {message:"Done with success", status:200, code:200}
let str = JSON.stringify(obj, (key, value) => {
    if (status === 200) {
        return undefined;
    }
    return value;
});

console.log(str)

let obj = {message:"Done with success", status:200, code:200}

let str = JSON.stringify(obj, (key, value) => {

if (status === 200) {

return undefined;

}

return value;

});

console.log(str)

المخرجات:

{"message":"تم بنجاح","status":200,"code":200}

1	{"message":"تم بنجاح","status":200,"code":200}

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

الكود:

let obj = {message:"تم بنجاح", status:200, code:200}
let str = JSON.stringify(obj, null, "---");
console.log(str)

let obj = {message:"تم بنجاح", status:200, code:200}

let str = JSON.stringify(obj, null, "---");

console.log(str)

المخرجات:

{
---"message": "تم بنجاح",
---"status": 200,
---"code": 200
}

{

---"message": "تم بنجاح",

---"status": 200,

---"code": 200

}

الخاتمة

في هذا البرنامج التعليمي، ألقينا نظرة على طريقتين مفيدتين للتعامل مع المحتوى المنسق بصيغة JSON. كائنات JSON موجودة في كل مكان، وعند بناء تطبيقات حديثة باستخدام JavaScript، تكون هذه الطرق مفيدة للغاية. لمعرفة المزيد، راجع البرامج التعليمية التالية على مدونتنا:

برمجة ممتعة!

Hark Labs

المؤلف · CloudSigma

Preslav Dobrev هو مصمم إبداعي في CloudSigma، يركز على هوية أعمال متسقة باستخدام قنوات التسويق التقليدية والمبتكرة. هو بارع في دمج الرؤية الفنية مع التسويق الاستراتيجي لخلق سرد قصصي مؤثر للعلامة التجارية.

دليل تعليمي حول العمل مع JSON.parse() و JSON.stringify()

JSON.parse()

JSON.stringify()

الخاتمة

Hark Labs

التعليقات