۲۵
آبان

جلسه ۱۰۵ : تبدیل اشیا جاوا اسکریپت به JSON

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، با یکی دیگر از جلسات دوره کامل آموزش JavaScript در خدمت شما دوستان هستیم. در این جلسه قصد داریم تا به آموزش تبدیل اشیا جاوا اسکریپت به JSON و تبدیل آرایه جاوا اسکریپت به JSON بپردازیم.

فهرست

تبدیل یک شی جاوا اسکریپت به رشته

داده ها هنگام دریافت از وب سرور همیشه به صورت رشته String هستند.

این داده ها با استفاده از تابع ()JSON.parse تبدیل به یک شی جاوا اسکریپت JavaScript خواهند شد.

فرض کنید ما متن زیر را از سرور دریافت کرده ایم:

مثال :

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

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

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

مثال :

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

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

مطمئن شوید که متن به فرمت json نوشته شده است. در غیر این صورت یک خطای syntax در یافت می کنید.

دریافت JSON از سرور

می توانید json را از سرور با استفاده از یک درخواست ajax، درخواست کنید.

تا زمانی که پاسخ سرور یک json است، می توانید آن را به یک شی جاوا اسکریپت تبدیل کنید.

در مثال زیر از XHR برای دریافت داده ها از سرور استفاده کرده ایم:

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

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();

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();

خودتان امتحان کنید »

دریافت JSON به صورت آرایه

اگر از تابع ()JSON.parse بر روی یک json که آرایه است استفاده کنید، تابع یک آرایه جاوا اسکریپت بر می گرداند:

مثال :

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();

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();

استثنا ها

تبدیل تاریخ و زمان

اشیا Date در json غیر مجاز هستند.

اگر می خواهید که یک تاریخ را وارد json کنید، آن را به عنوام یک رشته بنویسید و بعد می توانید آن را دوباره تبدیل به یک شی date کنید.

در مثال زیر یک رشته را به یک شی date تبدیل کرده ایم:

مثال : تبدیل رشته به شیء Date

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;

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;

خودتان امتحان کنید »

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

پارامتر reviver یک تابع است که هر مقدار را قبل از بازگشت مقدار بررسی می کند:

مثال : پارامتر reviver

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;

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;

خودتان امتحان کنید »

تبدیل توابع

توابع نیز در json غیر مجاز هستند.

برای استفاده از توابع در json نیز باید آن ها را تبدیل به رشته و بعدا دوباره تبدیل به تابع کنید.

در مثال زیر یک رشته را تبدیل به یک تابع کرده ایم:

مثال : تبدیل رشته به تابع

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();

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();

خودتان امتحان کنید »

بهتر است از توابع در josn استفاده نکنید زیرا توابع قلمرو خود را از دست داده و برای برگرداندن آن باید از تابع ()eval استفاده کنیم.

جلسه آموزش تبدیلJSON نیز به پایان رسید،در ادامه ی دوره با ما همراه باشید.

QR: جلسه ۱۰۵ : تبدیل اشیا جاوا اسکریپت به JSON

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۰۵ : تبدیل اشیا جاوا اسکریپت به JSON

تبدیل یک شی جاوا اسکریپت به رشته

دریافت JSON از سرور

دریافت JSON به صورت آرایه

استثنا ها

تبدیل تاریخ و زمان

تبدیل توابع

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ