مقدمة
هناك العديد من الطرق التي يمكن من خلالها استخدام JSON في JavaScript. أحد استخداماته الأساسية هو تخزين البيانات. يمكنك أيضًا استخدامه لنقل البيانات بين العملاء، أو بين الخوادم، أو من الخادم إلى العميل. وتشمل التطبيقات المفيدة الأخرى القدرة على تكوين البيانات والتحقق من صحتها بالإضافة إلى إنشاء هياكل البيانات.
في هذا البرنامج التعليمي، سنستكشف كيف يمكنك استخدام JSON في برامج JavaScript الخاصة بك. إذا كانت لديك خبرة سابقة في البرمجة باستخدام JavaScript، فيجب أن يبدو هذا أمرًا سهلاً بالنسبة لك.
ما هو JSON؟
يرمز JSON إلى JavaScript Object Notation. وهو تنسيق مصمم لتمكين مشاركة أنواع مختلفة من البيانات. يستخدم JSON بشكل أساسي JavaScript كلغة برمجة رئيسية له. كما أنه يعمل مع لغات أخرى مثل Python, PHP, Ruby، بالإضافة إلى Java. إنه سهل القراءة، وخفيف الوزن للغاية، ولا يتطلب الكثير من التنسيق. يمكنك التعرف على الصيغة العامة للتنسيق وبنيته باتباع برنامجنا التعليمي: نظرة عامة على تنسيق مشاركة بيانات JSON.
يمكن استخدام JSON بمفرده أو تحديده في تنسيق ملف آخر. عندما يكون بمفرده، فإنه يستخدم امتداد .json. وعندما يكون في تنسيق آخر، فإنه يظهر إما كسلسلة نصية لـ JSON داخل علامات اقتباس أو ككائن مخصص لمتغير. على سبيل المثال، يمكن استخدام JSON في تنسيق .html أيضًا. يتيح لك هذا التنسيق إجراء نقل البيانات بين الخادم والمتصفح بسهولة نسبية.
تنسيق JSON يعتمد على النصوص. تظهر بيانات المفتاح والقيمة في أقواس متعرجة. إليك كيف يبدو ملف .json النموذجي:
|
1 2 3 4 5 |
{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
إذا كان لديك كائن JSON في ملف .js أو .html، فسيظهر كمتغير مثل هذا:
|
1 2 3 4 5 |
var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
في بعض الحالات، قد تراها كلها في سطر واحد. يحدث هذا عندما يتم تقديم JSON كسلسلة نصية بدلاً من كائن في ملف JavaScript:
|
1 |
var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'; |
يمكنك تحويل كائنات JSON إلى سلاسل نصية. هذا مفيد عندما تريد إجراء نقل سريع للبيانات.
JSON مقابل كائن JavaScript
كما ذكرنا من قبل، يعمل JSON مع أي لغة برمجة. ومع ذلك، لا يمكنك العمل مع كائنات JavaScript إلا باستخدام JavaScript. الصيغة في JSON و JavaScript متشابهة. الفرق هو أن كائنات JavaScript تظهر في سلاسل نصية بدلاً من علامات الاقتباس. بالإضافة إلى ذلك، يمكن لكائنات JavaScript استخدام الدوال كقيم، مما يعني أنها أقل تقييدًا.
في المثال التالي، نعرض خيار JavaScript للمستخدم. المستخدم هو Sammy Shark وهو متصل بالإنترنت الآن:
|
1 2 3 4 5 6 7 8 |
var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; } }; |
كما ترى، لا توجد علامات اقتباس حول أي مفاتيح مثل first_name, last_name, online، أو full_name. أيضًا، هناك قيمة دالة موضوعة في السطر الأخير. إذا كنت تريد الوصول إلى البيانات في شكل سلسلة نصية، يمكنك استدعاء user.first_name باستخدام تدوين النقطة. إذا كنت تريد الاسم الكامل بدلاً من ذلك، فستستخدم user.full_name()، لأنها دالة.
كيفية الوصول إلى بيانات JSON
كما تطرقنا في القسم الأخير، يمكنك الوصول إلى بيانات JSON في JavaScript باستخدام تدوين النقطة. لنأخذ مثالاً لكائن JSON باسم sammy:
|
1 2 3 4 5 |
var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
سيكون تدوين النقطة الخاص بنا للوصول إلى القيم هو:
|
1 2 3 |
sammy.first_name sammy.last_name sammy.online |
يأتي المتغير أولاً. بعد ذلك، نضع نقطة. وأخيرًا، نذكر المفتاح الذي نريد الوصول إليه.
لنفترض أننا نريد إنشاء تنبيه في JavaScript يعرض قيمة الـ first_name . لجعله يظهر في نافذة منبثقة، سنستخدم دالة JavaScript الـ alert() كالتالي:
|
1 |
alert(sammy.first_name); |
|
1 2 |
المخرجات Sammy |
طريقة أخرى للوصول إلى البيانات من JSON هي استخدام صيغة الأقواس المربعة. يجب وضع المفتاح بين علامتي اقتباس مزدوجتين داخل الأقواس المربعة. إليك تكملة للمثال السابق:
|
1 |
alert(sammy["online"]); |
|
1 2 |
المخرجات true |
ماذا لو كنت تعمل مع عناصر مصفوفة متداخلة؟ في هذه الحالة، يتعين عليك استدعاء رقم العنصر في المصفوفة. خذ المثال التالي:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var user_profile = { "username" : "SammyShark", "social_media" : [ { "description" : "twitter", "link" : "https://twitter.com/digitalocean" }, { "description" : "facebook", "link" : "https://www.facebook.com/DigitalOceanCloudHosting" }, { "description" : "github", "link" : "https://github.com/digitalocean" } ] } |
نفترض أننا نريد الوصول إلى السلسلة النصية facebook. إليك كيف سنستخدم تدوين النقطة للوصول إلى هذا العنصر في المصفوفة باستخدام رقمه:
|
1 |
alert(user_profile.social_media[1].description); |
|
1 2 |
المخرجات facebook |
تذكر إضافة نقطة إضافية لكل عنصر متداخل.
الدوال المستخدمة مع JSON
بعد ذلك، سنلقي نظرة على بعض الدوال التي يمكنك استخدامها مع JSON. يصبح نقل البيانات وتخزينها سهلاً للغاية عندما يمكنك تحويل JSON من كائن إلى سلسلة نصية أو من سلسلة نصية إلى كائن. سنستكشف كيف يمكنك تحويل JSON إلى سلسلة نصية (stringify) وتحليله (parse) بطريقتين مختلفتين:
- JSON.stringify()
تعتبر السلاسل النصية أفضل للاستخدام عند محاولة نقل البيانات بطريقة خفيفة الوزن. ولهذا السبب تُستخدم لتخزين ونقل البيانات من العميل إلى الخادم. ضع في اعتبارك المثال التالي. لنفترض أنك تجمع بيانات إعدادات المستخدم على جهاز واحد. وتحتاج إلى إرسال هذه المعلومات إلى خادمك. ستستخدم سلسلة نصية لهذا الغرض. ثم يمكنك تحويلها مرة أخرى باستخدام JSON.parse() لقراءتها والعمل بها.
الدالة التي سنركز عليها هنا هي JSON.stringify(). تقوم هذه الدالة بتحويل كائن JSON إلى سلسلة نصية بتنسيق JSON. في هذا المثال، سنقوم بتعيين الكائن الخاص بنا إلى المتغير obj. وسنقوم بتحويله باستخدام دالة JSON.stringify(). للقيام بذلك، سنمرر obj إلى الدالة ثم نقوم بتعيين السلسلة النصية إلى المتغير s كالتالي:
|
1 2 |
var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"} var s = JSON.stringify(obj) |
استدعاء المتغير s سيعطيك JSON كسلسلة نصية:
|
1 |
'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}' |
- JSON.parse()
من المفهوم أن JSON.parse() تؤدي الوظيفة المعاكسة. بعد الانتهاء من نقل البيانات، تحتاج إلى تحويلها مرة أخرى إلى كائن JSON لتتمكن من العمل معها. أحد الخيارات هو استخدام دالة eval(). ومع ذلك، فإن هذا النهج ليس آمناً تماماً. ولهذا السبب نفضل استخدام دالة JSON.parse().
لننظر في المثال السابق مرة أخرى. سنقوم بتمرير السلسلة النصية s إلى دالة JSON.parse(). ثم سنعطيها متغيراً جديداً:
|
1 |
var o = JSON.parse(s) |
كائننا الجديد الآن هو o. وسيكون هو نفسه obj. وتتضح الصورة أكثر عندما نأخذ بعين الاعتبار JSON.parse() في ملف HTML كالتالي:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <p id="user"></p> <script> var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'; var obj = JSON.parse(s); document.getElementById("user").innerHTML = "الاسم: " + obj.first_name + " " + obj.last_name + "<br>" + "الموقع: " + obj.location; </script> </body> </html> |
هنا، يمكنك رؤية كيف قمنا بتحويل السلسلة النصية s إلى كائن يمكن استرجاعه. وبالتالي، JSON.parse() هو خيار آمن لتحويل سلاسل JSON النصية إلى كائنات.
الخاتمة
كما رأينا في هذا البرنامج التعليمي، فإن لـ JSON العديد من التطبيقات في JavaScript. وهي مفيدة بشكل خاص لأنه يمكن استخدامها مع أي لغة برمجة تقريبًا، مما يجعلها الخيار الطبيعي. علاوة على ذلك، لم نكشف إلا عن القليل فقط. هناك الكثير مما يمكنك فعله باستخدام JSON. وهي مدعومة بالفعل في واجهات برمجة التطبيقات (APIs).
إليك المزيد من الموارد من مدونتنا التي ستساعدك على البرمجة باستخدام JavaScript:
- تعرف على كيفية عمل النماذج الأولية والوراثة في JavaScript.
- استكشف بالتفصيل كيفية إضافة JavaScript إلى HTML.
- إذا كنت تقوم ببناء تطبيق الويب الخاص بك، فإلقِ نظرة على دليلنا حول كيفية اختيار أفضل إعداد للخادم.
حوسبة سعيدة!
التعليقات
لا توجد تعليقات بعد. كن أول من يعلق.