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

JSON چیست؟

JSON مخفف عبارت JavaScript Object Notation است.در JSON فرمت تبادل داده بسیار سبک برای تبادل داده بین سرور و کلاینت می باشد که تجزیه و تولید ان بسیار سریع و آسان است.

مانند JSON،XML نیز یک فرمت مبتنی بر متن است که نوشتن و فهم آن برای انسان و رایانه آسان است، اما برخلاف XML، ساختارهای داده JSON پهنای باند کمتری نسبت به نسخه‌های XML خود اشغال می‌کنند.

JSON بر اساس دو ساختار اساسی است:

Object: این ساختار عنوان مجموعه ای نامرتب از جفت های کلید/مقدار (به عنوان مثال key:value) تعریف می شود.هر شی با یک کرلی بریس از سمت چپ شروع می شود }و با یک کرلی بریس از سمت راست به پایان می رسد { .چندین جفت کلید/مقدار با کاما , از هم جدا می شوند.
Array: این ساختار به عنوان یک لیست مرتب شده از مقادیر تعریف می شود.یک آرایه با یک براکت چپ شروع می شود ] و با یک براکت راست [ پایان می یابد. مقادیر با کاما, از هم جدا می شوند.

در JSON، نام ویژگی ها یا کلیدها همیشه رشته هستند، در حالی که مقدار می تواند یک string, number, true یا false, null یا حتی یک object یا یک arrayباشد.رشته ها باید در داخل دابل کوتیشن " قرار گیرند و می توانند شامل کاراکترهایی مانند\n, \t و \باشند.یک شی JSON ممکن است به شکل زیر باشد:

{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000,
        "genre": "Fantasy Fiction",
        "bestseller": true
    }
}

{

"book": {

"name": "Harry Potter and the Goblet of Fire",

"author": "J. K. Rowling",

"year": 2000,

"genre": "Fantasy Fiction",

"bestseller": true

}

در حالی که نمونه ای از آرایه JSON چیزی شبیه به این است:

{
    "fruits": [
        "Apple",
        "Banana",
        "Strawberry",
        "Mango"
    ]
}

{

"fruits": [

"Apple",

"Banana",

"Strawberry",

"Mango"

]

}

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

تجزیه داده های JSON در جاوا اسکریپت

در جاوا اسکریپت، می توانید به راحتی داده های JSON دریافتی از وب سرور را با استفاده از متد ()JSON.parse تجزیه کنید.این متد JSON استرینگ را تجزیه می کند و مقدار جاوا اسکریپت یا شیء توصیف شده توسط رشته را می سازد.اگر رشته داده شده JSON معتبر نباشد، با یک خطای نحوی مواجه خواهید شد.

JSON Parsing در جاوا اسکریپت

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

{"name": "Peter", "age": 22, "country": "United States"}

1	{"name": "Peter", "age": 22, "country": "United States"}

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

// 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

// 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 نیز می توانند تودرتو باشند.یک شی JSON می تواند به طور دلخواه شامل سایر اشیاء JSON، آرایه ها، آرایه های تو در تو، آرایه هایی از اشیاء JSON و …باشد.مثال زیر به شما نشان می دهد که چگونه یک شی JSON تودرتو را تجزیه کنید و همه مقادیر را در جاوا اسکریپت استخراج کنید.

/* 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

/* 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 تبدیل می کند. همانطور که در زیر نشان داده شده است:

Stringify a JavaScript Object

مثال زیر به شما نشان می دهد که چگونه یک شی جاوا اسکریپت را به رشته JSON تبدیل کنید:

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

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

خروجی مثال بالا چیزی شبیه به این خواهد بود:

{“name”:”Peter”,”age”:22,”country”:”United States”}

توجه: اگرچه اشیاء جاوا اسکریپت و JSON کاملاً شبیه به هم هستند، اما دقیقاً یکسان نیستند. به عنوان مثال، در جاوا اسکریپت، نام ویژگی های اشیا را می توان در سینگا کوتیشن (‘…’) یا دابل کوتیشن (“…”) قرار داد، یا می توانید نقل قول ها را به طور کلی حذف کنید. اما، در JSON، همه نام‌ پراپرتی ها باید در داخل دابل کوتیشن قرار بگیرند.

Stringify a JavaScript Array

به طور مشابه، می توانید آرایه های جاوا اسکریپت را به رشته های JSON تبدیل کنید، مانند :

// Sample JS array
var arr = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Converting JS array to JSON string
var json = JSON.stringify(arr);
alert(json);

// Sample JS array

var arr = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Converting JS array to JSON string

var json = JSON.stringify(arr);

alert(json);

خروجی مثال بالا چیزی شبیه به این خواهد بود:

[“Apple”,”Banana”,”Mango”,”Orange”,”Papaya”]

هشدار:از لحاظ امنیتی به هیچ عنوان از تابع () eval برای ارزیابی داده های JSON استفاده نکنید. زیرا به مهاجم اجازه می دهد کد مخرب جاوا اسکریپت را به برنامه شما تزریق کند.

خب دوستان گرامی به پایان جلسه JSON Parsing در جاوا اسکریپت رسیدیم امیدواریم مورد توجه شما قرار گیرد.

سایر مقالات:

Strict Mode در جاوا اسکریپت

Closures در جاوا اسکریپت

برای امتیاز به این نوشته کلیک کنید!

[کل: 2 میانگین: 1.5]

اشتراک‌گذاری

اسنک بار در Jetpack Compose به چه صورتی پیاده سازی می‌شود ؟ نوشته قبل

Error Handling در جاوا اسکریپت نوشته بعد

علی فرجی

علی فرجی هستم، برنامه نویس جاوا اسکریپت و ریکت با بیش از 5 سال تجربه. من عاشق برنامه نویسیم و همیشه به دنبال یادگیری چیزهای جدید هستم.همچنین یکی از بنیانگذار های سایت کدایت ، یک سایت آموزش برنامه نویسی در حوزه جاوا اسکریپت، ریکت، اندروید و ... هستم. امیدوارم بتوانم با دانش و تجربه خود به سایر برنامه نویسان کمک کنم تا در این زمینه پیشرفت کنند.