در این قسمت از سری مقالات آموزشی JSON در وبسایت کدفرند، به بررسی و یادگیری کاربرد دستور Parse در JSON میپردازیم. اگر مقالات قبلی این سری آموزشی را مطالعه نکردید، اینجا کلیک کنید.

معمولا از JSON برای تبادل داده با سرور استفاده میشود. وقتی از یک وب سرور داده‌ای دریافت کنیم، داده همیشه از نوع String خواهد بود.

میتوانیم از دستور ()JSON.parse برای تبدیل داده‌های String دریافت شده از سرور به آبجکت‌ جاوااسکریپت استفاده کنیم.

مثال برای Parsing JSON

تصور کنید ما متن زیر را از وب سرور دریافت کردیم:

'{ "name":"John", "age":30, "city":"New York"}'

از فانکشن جاوااسکریپت ()JSON.parse برای تبدیل متن به آبجکت جاوااسکریپت استفاده کنید. به مثال زیر توجه کنید:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

باید توجه داشته باشید که متن با فرمت JSON نوشته شده باشد. در غیر صورت شما با خطای سینتکس مواجه خواهید شد.

میتوانید از آبجکت جاوااسکریپت در صفحه HTML خود استفاده کنید. برای مثال:

<p id="demo"></p> 

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

درخواست JSON از سرور

شما میتوانید با استفاده از یک AJAX Rqeuest ساده، از وب سرور داده JSON درخواست کنید.

تا زمانی که پاسخ وب سرور با فرمت JSON نوشته شده باشد، شما قادر هستید String را به آبجکت جاوااسکریپت تبدیل کنید. برای مثال:

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

از XMLHttpRequest برای دریافت داده از سرور استفاده کنید.

آرایه به عنوان JSON

هنگام استفاده از متد ()JSON.parse روی داده JSON که از آرایه‌ای گرفته شده، ابن متد به جای آبجکت جاوااسکریپت، آرایه جاوااسکریپت return خواهد کرد. به مثال زیر توجه کنید:

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

Exceptions با استثناها

تبدیل تاریخ‌ها – Parsing Dates

آبجکتهای Date در JSON معتبر نیستند. اگر شما نیاز به استفاده از تاریخ دارید، آنرا به شکل String بنویسید، زیرا بعدا میتوانند آنرا دوباره به آبجکت تاریخ جاوااسکریپت تبدیل کنید. برای مثال:

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

و یا میتوانید از یک پارامتر دوم به نام  reviver برای متد ()JSON.parse استفاده کنید.

پارامتر  reviver تابعی است که هر کدام از خصوصیات (property) را قبل از برگرداندن یک مقدار، چک میکند:

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
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;

تبدیل توابع – Parsing Functions

همانند تاریخها، توابع نیز در JSON معتبر نیستند و اگر شما تیاز به include کردن یک تابع دارید، باید آنرا به شکل String بنویسید. زیرا میتوانید آنرا بعدا بعدا به فانکشن جاوااسکریپت تبدیل کنید. برای مثال:

var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();

پشتیبانی مرورگرها – Browser Support

متد ()JSON.parse در تمامی مرورگرهای اصلی و شاخص و در ECMAScript آخرین استاندارد (جاوااسکریپت) include شده است و پشتیبانی میشود.

در این مطلب به بررسی و یادگیری دستور Parse در JSON پرداختیم. در بخش بعدی به بررسی دستور ()JSON.stringify خواهیم پرداخت. برای مشاهده اینجا کلیک کنید.

*