در این بخش از سری آموزش جاوا اسکریپت قصد داریم به شما نحوه اینکد و دیکد داده JSON در جاوا اسکریپت را آموزش بدیم.
JSON چیست
JSON مخفف JavaScript Object Notation است. JSON یک فرمت تبادل-داده ای بسیار سبک برای تبادل داده ها بین سرور و کلاینت که برای تولید و پردازش سریع و آسان است.
همانند XML , JSON نیز یک فرمت بر اساس متن است که خواندن و نوشتن آن هر دو برای انسان و کامپیوتر بسیار ساده است اما برخلاف XML , داده JSON نسبت به ورژن XML خود پهنای باند بسیار کمتری اشغال می کند.
JSON بر اساس دو ساختار ساده است :
- Object : به عنوان یک مجموعه نامرتب از جفت کلید/مقدار (
Key:value) است. هر شیء با یک براکت فرفره ای چپ{شروع و با براکت فرفره ای راست}بسته می شود. جفت های چندگانه key/value با کاما,از همدیگر جدا می شوند. - Array : به عنوان یک لیست مرتب شده از مقادیر تعریف می شود. یک آرایه با براکت مربعی
[شروع و با براکت مربعی]به پایان می رسد. مقادیر آن با کاما,از هم جدا می شوند.
در JSON , نام خصوصیات یا کلید ها همیشه رشته (string) هستند در حالی که می توانید رشته, عدد , true, false, null شی یا آرایه نیز باشد.
رشته ها باید داخل علامت نقل قول “ قرار گیرند و می توانند دارای کاراکترهای \n, \t, \ باشند.
یک شیء JSON شبیه به این است :
|
1 2 3 4 5 6 7 8 9 |
{ "book": { "name": "Harry Potter and the Goblet of Fire", "author": "J. K. Rowling", "year": 2000, "genre": "Fantasy Fiction", "bestseller": true } } |
یک مثال از آرایه JSON نیز مشابه این است :
|
1 2 3 4 5 6 7 8 |
{ "fruits": [ "Apple", "Banana", "Strawberry", "Mango" ] } |
نکته: یک فرمت داده قابل تبادل یک فرمت متنی است که برای تبادل داده بین پلتفرم و سیستم عامل های مختلف استفاده می شود. JSON محبوب تین و سبک ترین فرمت داده قابل تبادل برای اپلیکیشن ها تحت وب و موبایل است.
تجزیه داده JSON در جاوا اسکریپت
در جاوا اسکریپت شما به سادگی می توانید داده های JSON دریافت شده از سرور را با متد JSON.parse() تجزیه و تفسیر کنید.
اگر مقدار رشته JSON نامعتبر باشد یک ارور سینتکس دریافت خواهید کرد.
فرض کنیم که رشته اینکد شده به JSON زیر را از یک وب سرور دریافت کردید :
|
1 |
{"name": "Peter", "age": 22, "country": "United States"} |
حالا می توانید به راحتی از متد JSON.parse() برای تبدیل این رشته JSON به شیء جاوا اسکریپت و دسترسی به هر یک از مقادیر آبجکت با نقطه . استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 |
// Store JSON data in a JS variable var json = '{"name": "Peter", "age": 22, "country": "United States"}'; // Converting JSON-encoded string to JS object var obj = JSON.parse(json); // Accessing individual value from JS object alert(obj.name); // Outputs: Peter alert(obj.age); // Outputs: 22 alert(obj.country); // Outputs: United States |
تجزیه داده تو در تو JSON در جاوا اسکریپت
آبجکت های JSON و آرایه ها نیز می توانند تو در تو (nested) باشند. یک آبجکت JSON می تواند شامل دیگر آبجکت های JSON , آرایه ها, آرایه های تو در تو و آرایه ای از آبجکت های JSON باشد.
مثال زیر به شما نحوه تجزیه یک شی تو در تو JSON و استخراج تمام مقادیر آن در جاوا اسکریپت را نشان می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/* Storing multi-line JSON string in a JS variable using the new ES6 template literals */ var json = `{ "book": { "name": "Harry Potter and the Goblet of Fire", "author": "J. K. Rowling", "year": 2000, "characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"], "genre": "Fantasy Fiction", "price": { "paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11" } } }`; // Converting JSON object to JS object var obj = JSON.parse(json); // Define recursive function to print nested values function printValues(obj) { for(var k in obj) { if(obj[k] instanceof Object) { printValues(obj[k]); } else { document.write(obj[k] + "<br>"); }; } }; // Printing all the values from the resulting object printValues(obj); document.write("<hr>"); // Printing a single value document.write(obj["book"]["author"] + "<br>"); // Prints: J. K. Rowling document.write(obj["book"]["characters"][0] + "<br>"); // Prints: Harry Potter document.write(obj["book"]["price"]["hardcover"]); // Prints: $20.32 |
اینکد داده ها به JSON در جاوا اسکریپت
بعضی مواقع شیء جاوا اسکریپت یا مقداری از کد شما نیاز به انتقال به سرور با AJAX را دارد.
جاوا اسکریپت متد JSON.stringify() را برای تبدیل مقادیر جاوا اسکریپت به یک رشته JSON معرفی کرده است.
رشته کردن یک Object جاوا اسکریپت
مثال زیر به شما نحوه تبدیل شیء جاوا اسکریپت به رشته JSON را نشان می دهد:
|
1 2 3 4 5 6 |
// Sample JS object var obj = {"name": "Peter", "age": 22, "country": "United States"}; // Converting JS object to JSON string var json = JSON.stringify(obj); alert(json); |
خروجی مثال بالا شبیه به این خواهد بود :
|
1 |
{"name":"Peter","age":22,"country":"United States"} |
نکته: با اینکه, جاوا اسکریپت و آبجکت های JSON (جیسون) کاملا مشابه هم هستند اما دقیقا یکسان نیستد. برای مثال در جاوا اسکریپت, نام خصوصیات شیء می توانید داخل “” یا ‘’ و یا بدون علامت نقل قول باشد اما در JSON نام همه خصوصیات (property) ها باید داخل علامت نقل قول “” قرار بگیرد.
رشته کردن یک آرایه در جاوا اسکریپت
می توانید آرایه ها را بصورت زیر به یک رشته JSON تبدیل کنید که هم به راحتی می شود ذخیره کرد و هم اینکه آن را با AJAX یا API به سمت سرور ارسال کرد.
|
1 2 3 4 5 6 |
// Sample JS array var arr = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; // Converting JS array to JSON string var json = JSON.stringify(arr); alert(json); |
خروجی مثال بالا شبیه به این خواهد بود :
|
1 |
["Apple","Banana","Mango","Orange","Papaya"] |
توجه: از تابع eval() برای ارزیابی داده JSON (شامل تعریف توابع در رشته جاوا اسکریپت و سپس تبدیل به قبل به یک تابع قابل اجرا با متد eval()) استفاده نکنید. چرا که این کار به نفوذگر اجازه می دهد کدهای مخرب جاوا اسکریپت را در اپلیکیشن شما تزریق کند.
امیدواریم در این بخش آموزش جاوا اسکریپت, از آموزش JSON در جاوا اسکریپت نهایت استفاده را برده باشد.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
