JSON / JS

الناشر :كودا فوكس -

تعرف على JSON

ما هو JSON

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

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

JSON - JS


من بعدها أصبح هذا الأسلوب متاحاً في جميع لغات البرمجة الأخرى بسبب قوته و مرونة التعامل معه.

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

بالمناسبة، الكلمة JSON هي اختصار لجملة JavaScript Object Notation.

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

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

مثال

📋
{ }

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

مثال

📋
{
"id": 1,
"user": "Ahmed",
"isAdmin": true
}

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

لا تنسى وضع فاصلة عادية , بين كل خاصيتين.
عدم فعل ذلك يؤدي لمشاكل عند محاولة تخزينها أو قراءتها مستقبلاً.

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

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


1- قيمة نصية

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

مثال

📋
{
"username": "Ahmed"
}

2- قيمة عددية

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

مثال

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

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

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

مثال

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

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

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

مثال

📋
{
"user": {
"firstName": "Ahmed",
"lastName": "codafox",
"country": "Lebanon"
}
}

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

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

مثال

📋
{
"coupon": null
}

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

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

لتفهم فائدة هاتين الدالتين عملياً، قم بتجربة الأمثلة التالية بنفس الترتيب.


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

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JSON Stringify Function</h1>
    <form>
        <label>First Name</label>
        <input id="firstName"/>
        <br><br>
        <label>Last Name</label>
        <input id="lastName"/>
        <br><br>
        <button onclick="storeData()" type="button">Store Data</button>
    </form>
    
    <script>
        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.');
        }
    </script>
</body>
</html>

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

المثال الثاني

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JSON Parse Function</h1>
    <button onclick="retrieveData()" type="button">Retrieve Data</button>
    <p id="fullName"></p>

    <script>
        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;
        }
    </script>
</body>
</html>

في الدرس التالي ستتعلم كيف تطلب بيانات من موقع آخر و الذي بدوره سيقوم بإعطائها لك على شكل جيسون و أنت من بعدها ستقوم بتحويلها لكائن جافاسكربت حتى تستطيع التعامل معها 🙂

الفرق بين JSON و XML

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

JSON يعتبر أفضل أسلوب في تبادل البيانات بسبب سهولة ترتيب و قراءة البيانات فيه بالإضافة إلى أنه يعتبر خفيف جداً مما يجعل الحمل على المواقع أقل و تبادل البيانات أسرع.

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

أسلوب JSON

📋
"users":[
{"firstName":"Ahmed", "lastName":"codafox"},
{"firstName":"Hala", "lastName":"Hassan"},
{"firstName":"Salem", "lastName":"Masri"}
]

أسلوب XML

📋
<users>
<user>
<firstName>Ahmed</firstName>
<firstName>codafox</firstName>
</user>
<user>
<firstName>Hala</firstName>
<firstName>Hassan</firstName>
</user>
<user>
<firstName>Salem</firstName>
<firstName>Masri</firstName>
</user>
</users>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال