JSON.parse()

استخدام JSON عادةً هو نقل البيانات مع خادم الويب.

عند استقبال البيانات من خادم الويب، تكون البيانات دائمًا نصية.

من خلال JSON.parse() تحليل البيانات، التي ستكون كائنات JavaScript.

مثال – تحليل JSON

تخيل أننا نستقبل هذا النص من خادم الويب:

'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'

استخدم دالة JavaScript JSON.parse() تحويل النص إلى كائن JavaScript:

var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');

تأكد من أن هذا النص مكتوب بتنسيق JSON، وإلا سيحدث خطأ في النص.

استخدم كائن JavaScript في صفحتك:

مثال

<p id="demo"></p> 
<script>
 document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 
</script>

تجربة شخصية

JSON من الخادم

يمكنك طلب JSON من الخادم باستخدام طلب AJAX.

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

مثال

استخدم XMLHttpRequest للحصول على البيانات من الخادم:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

تجربة شخصية

انظر إلى ملف json_demo.txt

كـ مجموعة JSON

باستخدام JSON المشتق من المجموعة JSON.parse() بعد ذلك، ستعود هذه الطريقة بمجموعة JavaScript بدلاً من كائن JavaScript.

مثال

الـ JSON الذي يتم استقباله من الخادم هو مجموعة:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myArr =  JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML  = myArr[0];
    }
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

تجربة شخصية

أنظر إلى json_demo_array.txt

استثناء

تحليل التاريخ

لا يسمح JSON بتضمين كائن التاريخ.

إذا كنت بحاجة إلى تضمين التاريخ، أكتبه كنص.

بعد ذلك يمكنك تحويلها إلى كائن تاريخي:

مثال

تحويل النص إلى تاريخ:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

تجربة شخصية

أو يمكنك استخدام JSON.parse() النسبة الثانية للدالة، يُسمى reviver.

هذا reviver الم参数 هو دالة، قبل العودة إلى القيمة، يقوم بفحص كل خاصية.

مثال

تحويل النص إلى تاريخ باستخدام دالة reviver:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
    if  (key == "birth") {
        return new Date(value);
    } else {
         return value;
   });
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

تجربة شخصية

تحليل الدوال

لا يسمح JSON بتضمين الدوال.

إذا كنت بحاجة إلى تضمين الدالة، أكتبها كنص.

يمكنك تحويلها إلى دالة لاحقاً:

مثال

التحويل النصي إلى دالة:

var text = '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();

تجربة شخصية

يجب أن تتجنب استخدام الدوال في JSON، لأن الدوال تفقد مجالها، وستحتاج أيضًا إلى استخدام eval() تحويلها إلى دالة.

دعم المتصفح

جميع المتصفحات الشائعة والأحدث ECMAScript (JavaScript) معايير تتضمن JSON.parse() الدالة:

الأرقام في الجدول التالي تشير إلى دعم الكامل JSON.parse() أول إصدار متصفح الدالة:

نعم 8.0 3.5 4.0 10.0

لل浏览器 القديم، يمكن العثور على مكتبات JavaScript التالية في العناوين التالية:

https://github.com/douglascrockford/JSON-js