جافاسكربتتعرف على JSON

ما هو JSON

جيسون ( JSON ) هو أسلوب في تخزين و نقل البيانات و عادةً ما يستخدم بهدف تبادل البيانات بين جهاز المستخدم و السيرفر.

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

في هذا الدرس ستتعرف على أنواع البيانات التي يمكن تخزينها في جيسون، الرموز التي نستخدمها فيه، و الدوال التي نستخدمها للتعامل معه.

الشكل العام لكود JSON

بما أن البيانات في جيسون تكون مرتبة على هيئة كائن فإن أول شيء يجب فعله هو وضع أقواس البداية و النهاية { } كما يلي.

{ }

بداخل أقواس البداية و النهاية يمكنك أن تبدأ بوضع البيانات على شكل مفاتيح ( Keys ) و قيم ( Values ) كما يلي.

{
    "id": 1,
    "user": "mhamad",
    "isAdmin": true
}

لاحظ أن أسماء الخصائص في جيسون يتم وضعها بين علامتي تنصيص " " و من بعدها يتم وضع نقطتين : و يليها القيم المراد إعطاءها لها.

أنواع البيانات في JSON

فيما يلي أنواع القيم المتاح التعامل معها في جيسون.

1- قيمة نصية

يمكنك وضع قيمة نصية مع الإشارة إلى أنه يجب وضعها بين علامتي تنصيص " ".

{
    "username": "mhamad"
}

2- قيمة عددية

يمكنك وضع قيمة عددية كما هي سواء كان العدد صحيح ( Integer ) أو عشري ( Float ).

{
    "id": 123,
    "avg": 2.9
}

3- مصفوفة من القيم

يمكنك وضع مصفوفة من القيم مع الإشارة إلى أنه يجب وضعها بين الرمزين [ ].

{
    "languages": ["Arabic","English","French"]
}

4- كائن جيسون كقيمة

يمكنك وضع كائن جيسون كقيمة مع الإشارة إلى أنه يجب وضعه بين الرمزين { }.

{
    "user": {
        "firstName": "Mhamad",
        "lastName": "Harmush",
        "country": "Lebanon"
    }
}

5- عدم تحديد القيمة

يمكنك وضع lلكلمة null إذا لم ترد أن تضع أي قيمة للخاصية.

{
    "coupon": null
}

دوال التحويل في JSON

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

في المثال التالي، قمنا بإنشاء دالة إسمها storeData() تقوم بحفظ جميع المعلومات التي يدخلها المستخدم في كائن واحد.
و من بعدها تقوم بتحويل هذا الكائن إلى نص بواسطة الدالة JSON.stringify() و من ثم تخزنه في ذاكرة المتصفح المحلية ( Local Storage ).

function storeData() {
    // lastNameValue و firstNameValue هنا قمنا بتخزين قيم الحقول في المتغيرات
    const firstNameValue = document.querySelector('#firstName').value;
    const lastNameValue = document.querySelector('#lastName').value;

    // و وضع كل قيم المتغيرات كخصائص فيه data هنا قمنا بإنشاء كائن إسمه
    const data = {
        firstName: firstNameValue,
        lastName: lastNameValue
    }

    // jsonData و تخزينها في المتغير data هنا قمنا بإنشاء نسخة نصيّة من الكائن
    const jsonData = JSON.stringify(data);

    // في ذاكرة المتصفح المحلية jsonData هنا قمنا بإضافة نسخة البيانات الموجودة في المتغير
    localStorage.setItem('data', jsonData);

    // هنا قمنا بإظهار رسالة تنبيه تخبر المستخدم أنه تم حفظ الكائن في ذاكرة المتصفح المحلية
    alert('Data are stored in local storage as a json string.');
}

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

function retrieveData() {
    // jsonData و تخزينها في المتغير data هنا قمنا باستعادة البيانات الموجودة في ذاكرة المتصفح المحلية في العنصر
    var jsonData = localStorage.getItem('data');
    
    // هنا قمنا بالتأكد ما إن كان فعلاً يوجد بيانات مخزنة في الذاكرة المحلية أم لا لأنه لا يمكن تنفيذ باقي الأوامر إن لم يكن كذلك
    if (jsonData == null) {
        alert('Data not found!');
        return;
    }

    // data إلى كائن عادي و تخزينه في المتغير data هنا قمنا بتحويل النص
    const data = JSON.parse(jsonData);

    // fullName يساوي id في العنصر الذي يملك data هنا قمنا بعرض قيم خصائص الكائن
    document.querySelector('#fullName').innerText = data.firstName + ' ' + data.lastName;
}

الفرق بين JSON و XML

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

كمثال بسيط، لاحظ كيف يكون شكل البيانات بأسلوب JSON و أسلوب XML.

"users":[
    {"firstName":"Mhamad", "lastName":"Harmush"},
    {"firstName":"Hala", "lastName":"Hassan"},
    {"firstName":"Salem", "lastName":"Masri"}
]

<users>
    <user>
        <firstName>Mhamad</firstName>
        <firstName>Harmush</firstName>
    </user>
    <user>
        <firstName>Hala</firstName>
        <firstName>Hassan</firstName>
    </user>
    <user>
        <firstName>Salem</firstName>
        <firstName>Masri</firstName>
    </user>
</users>