کار با JSON در جاوا اسکریپت — راهنمای کاربردی

JSON اختصاری برای عبارت «نشانه‌گذاری شیء جاوا اسکریپت» (JavaScript Object Notation) است. JSON استانداردی برای قالب‌بندی مبتنی بر متن است که داده‌های ساخت‌یافته را بر اساس ساختار شیء جاوا اسکریپت نمایش می‌دهد. این نشانه‌گذاری به طور معمول برای انتقال داده‌ها در وب‌اپلیکیشن‌ها استفاده می‌شود. این انتقال شامل ارسال برخی داده‌ها از سرور به کلاینت است و از این رو می‌تواند روی یک صفحه وب نمایش یابد. شما در موارد مختلف با آن مواجه خواهید شد و از این رو در این مقاله هر آنچه که برای کار با JSON در جاوا اسکریپت نیاز دارید ارائه می‌کنیم. این موارد شامل تجزیه JSON برای دسترسی به داده‌های آن و همچنین ایجاد JSON است.

پیش‌نیازها

• سواد مقدماتی رایانه
• درک پایه از HTML و CSS
• آشنایی با مبانی جاوا اسکریپت و شیءگرایی در جاوا اسکریپت

هدف از این مقاله درک شیوه کار کردن با داده‌های ذخیره شده به صورت JSON و ایجاد شیءهای JSON است. برای مطالعه قسمت قبلی این مجموعه مطلب آموزشی می‌توانید روی لینک زیر کلیک کنید.

• وراثت در جاوا اسکریپت --- راهنمای کاربردی

JSON چیست؟

JSON یک قالب مبتنی بر متن است که از ساختار شیء جاوا اسکریپت پیروی می‌کند و از سوی «داگلاس کراکفورد» (Douglas Crockford) ترویج یافته است. علیرغم این که این قالب کاملاً شبیه به ساختار لفظی شیء جاوا اسکریپت است، اما می‌تواند مستقل از جاوا اسکریپت نیز استفاده شود. بسیاری از محیط‌های برنامه‌نویسی امکان خواندن (تجزیه) و تولید JSON را می‌دهد.

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

JSON در قالب رشته است و زمانی که بخواهید داده‌ها را روی یک شبکه منتقل کنید، بسیار مفید خواهد بود. این قالب هنگامی که بخواهید به داده‌هایش دسترسی پیدا کنید، باید به شیء بومی جاوا اسکریپت تبدیل شود. این مشکل بزرگی نیست و جاوا اسکریپت شیء JSON را ارائه کرده است که متدهایی برای تبدیل بین این دو نوع دارد.

نکته: تبدیل کردن یک رشته به شیء بومی به نام «تجزیه کردن» (parsing) نامیده می‌شود؛ در حالی که تبدیل کردن یک شیء بومی به یک رشته جهت ارسال کردن روی یک شبکه به نام «رشته سازی» (stringification) نامیده می‌شود.

یک شیء JSON می‌تواند در فایل خاص خود ذخیره شود که اساساً یک فایل متنی با پسوند json. و نوع MIME به صورت application/json است.

ساختار JSON

همان طور که پیش‌تر توضیح دادیم، JSON رشته‌ای است که قالب آن تا حدود زیادی شبیه به قالب لفظی شیء جاوا اسکریپت است. شما می‌توانید برخی انواع داده ابتدایی مانند رشته، اعداد، آرایه‌ها، مقادیر بولی، و دیگر شیءهای لفظی را که در شیء جاوا اسکریپت وجود دارند، درون JSON قرار دهید. بدین ترتیب امکان ساخت یک سلسله‌مراتب داده مانند زیر وجود دارد:

1{
2  "squadName": "Super hero squad",
3  "homeTown": "Metro City",
4  "formed": 2016,
5  "secretBase": "Super tower",
6  "active": true,
7  "members": [
8    {
9      "name": "Molecule Man",
10      "age": 29,
11      "secretIdentity": "Dan Jukes",
12      "powers": [
13        "Radiation resistance",
14        "Turning tiny",
15        "Radiation blast"
16      ]
17    },
18    {
19      "name": "Madame Uppercut",
20      "age": 39,
21      "secretIdentity": "Jane Wilson",
22      "powers": [
23        "Million tonne punch",
24        "Damage resistance",
25        "Superhuman reflexes"
26      ]
27    },
28    {
29      "name": "Eternal Flame",
30      "age": 1000000,
31      "secretIdentity": "Unknown",
32      "powers": [
33        "Immortality",
34        "Heat Immunity",
35        "Inferno",
36        "Teleportation",
37        "Interdimensional travel"
38      ]
39    }
40  ]
41}

اگر این شیء را درون یک برنامه جاوا اسکریپت بارگذاری کنید (برای نمونه درون یک متغیر به نام superHeroes تجزیه کنید)، در ادامه می‌توانید با استفاده از همان نشانه‌گذاری نقطه/براکت که در شیءهای جاوا اسکریپت مشاهده کردید، به داده‌های درون آن دسترسی داشته باشید. برای نمونه:

1superHeroes.homeTown<br>superHeroes['active']

برای دسترسی به داده‌هایی که در سطوح عمیق‌تری از سلسله‌مراتب قرار دارند، کافی است نام‌های مشخصه‌ها و اندیس‌های آرایه‌ها را با هم ترکیب کنید. برای نمونه برای دسترسی به سومین superpower از دومین hero که در فهرست members قرار دارد به صورت زیر عمل می‌کنیم:

1superHeroes['members'][1]['powers'][2]

1. ابتدا نام متغیر یعنی superHeroes را داریم.
2. درون آن می‌خواهیم به مشخصه members دسترسی داشته باشیم و از این رو از ["members"] استفاده می‌کنیم.
3. members شامل آرایه‌ای است که شیءهایی در آن قرار گرفته‌اند و ما می‌خواهیم به شیء دوم درون آرایه دسترسی داشته باشیم و از این رو از [1] استفاده می‌کنیم.
4. درون این شیء می‌خواهیم به مشخصه powers دسترسی داشته باشیم و بنابراین از ["powers"] استفاده می‌کنیم.
5. درون مشخصه powers آرایه‌ای وجود دارد که شامل superpower-های قهرمان منتخب است. ما به superpower سوم نیاز داریم و از این رو از اندیس [2] استفاده می‌کنیم.

آرایه‌های JSON

در بخش قبل اشاره کردیم که متن JSON اصولاً شباهت به شیء جاوا اسکریپت دارد و این بیان تا حدود زیادی صحیح است. دلیل این که می‌گوییم تا «حدود زیادی» این است که یک آرایه نیز در واقع یک JSON معتبر محسوب می‌شود. برای نمونه به کد زیر توجه کنید:

1[
2  {
3    "name": "Molecule Man",
4    "age": 29,
5    "secretIdentity": "Dan Jukes",
6    "powers": [
7      "Radiation resistance",
8      "Turning tiny",
9      "Radiation blast"
10    ]
11  },
12  {
13    "name": "Madame Uppercut",
14    "age": 39,
15    "secretIdentity": "Jane Wilson",
16    "powers": [
17      "Million tonne punch",
18      "Damage resistance",
19      "Superhuman reflexes"
20    ]
21  }
22]

کد فوق یک JON کاملاً معتبر است. کافی است با آغاز از یک اندیس آرایه به آیتم‌های آن دسترسی داشته باشید. برای نمونه می‌توانید از کد زیر استفاده کنید:

1[0]["powers"][0]

نکات دیگر

• JSON قطعاً یک قالب داده است، چون شامل داده است و هیچ متدی ندارد.
• JSON نیازمند گیومه‌های جفتی (" ") پیرامون نام رشته‌ها و مشخصه‌ها است و گیومه‌های تکی (‘ ‘) معتبر نیستند.
• حتی یک کاما یا دونقطه منفرد نیز می‌تواند باعث نامعتبر شدن کل یک فایل JSON شود و آن را از کار بیندازید. هنگامی که می‌خواهید از هر نوع داده‌ای استفاده کنید، ابتدا باید آن را اعتبار سنجی کنید. با این حال JSON-های تولید شده از سوی رایانه عموماً اشکالی دارند؛ مگر این که اشکالی در برنامه تولیدکننده آن‌ها وجود داشته باشد. شما می‌توانید JSON را با استفاده از یک اپلیکیشن مانند JSONLint (+) اعتبارسنجی کنید.
• JSON می‌تواند در عمل از هر نوع داده‌ای که برای قرار گرفتن درون JSON معتبر است، ایجاد شود و محدود به شیء یا آرایه نیست. بنابراین برای مثال، یک رشته یا عدد منفرد نیز می‌تواند یک شیء معتبر JSON باشد.
• برخلاف کد جاوا اسکریپت که در آن مشخصه‌های شیء ممکن است به صورت خارج از گیومه باشند، درون JSON تنها رشته‌های درون گیومه می‌توانند به عنوان مشخصه استفاده شوند.

مثال کاربردی

بدین ترتیب مثالی را بررسی می‌کنیم که شیوه بهره‌برداری از داده‌های JSON روی یک وب‌سایت را به ما نشان می‌دهد.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

در ابتدا کد زیر را کپی کرده و در فایلی با نام heroes.heml روی سیستم خود ذخیره کنید:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5
6    <title>Our superheroes</title>
7
8    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"> 
9    <link rel="stylesheet" href="style.css">
10  </head>
11
12  <body>
13
14      <header>
15
16      </header>
17
18      <section>
19
20      </section>
21
22    <script>
23    var header = document.querySelector('header');
24    var section = document.querySelector('section');
25    
26    </script>
27  </body>
28</html>

همچنین کد زیر را کپی کرده و در فایلی با نام style.css در کنار فایل فوق روی سیستم خود ذخیره کنید:

1/* || general styles */
2
3html {
4  font-family: 'helvetica neue', helvetica, arial, sans-serif;
5}
6
7body {
8  width: 800px;
9  margin: 0 auto;
10}
11
12h1, h2 {
13  font-family: 'Faster One', cursive;
14}
15
16/* header styles */
17
18h1 {
19  font-size: 4rem;
20  text-align: center;
21}
22
23header p {
24  font-size: 1.3rem;
25  font-weight: bold;
26  text-align: center;
27}
28
29/* section styles */
30
31section article {
32  width: 33%;
33  float: left;
34}
35
36section p {
37  margin: 5px 0;
38}
39
40section ul {
41  margin-top: 0;
42}
43
44h2 {
45  font-size: 2.5rem;
46  letter-spacing: -5px;
47  margin-bottom: 10px;
48}

فایل دوم شامل CSS ساده‌ای برای شبکه‌بندی صفحه html ما است و فایل اول نیز یک کد HTML کاملاً ساده body به صورت زیر را شامل می‌شود:

1<header>
2</header>
3
4<section>
5</section>

همچنین یک <script> وجود دارد که کد جاوا اسکریپت موردنیاز خود در این تمرین را درون آن می‌نویسیم. در حال حاضر این فایل تنها شامل دو خط است که ارجاع‌هایی به عناصر <header> و <section> به دست آورد و آن‌ها را در متغیرهایی به صورت زیر ذخیره می‌کند:

1var header = document.querySelector('header');
2var section = document.querySelector('section');

داده‌های JSON که در این مثال استفاده می‌کنیم به صورت زیر هستند:

1{
2  "squadName" : "Super hero squad",
3  "homeTown" : "Metro City",
4  "formed" : 2016,
5  "secretBase" : "Super tower",
6  "active" : true,
7  "members" : [
8    {
9      "name" : "Molecule Man",
10      "age" : 29,
11      "secretIdentity" : "Dan Jukes",
12      "powers" : [
13        "Radiation resistance",
14        "Turning tiny",
15        "Radiation blast"
16      ]
17    },
18    {
19      "name" : "Madame Uppercut",
20      "age" : 39,
21      "secretIdentity" : "Jane Wilson",
22      "powers" : [
23        "Million tonne punch",
24        "Damage resistance",
25        "Superhuman reflexes"
26      ]
27    },
28    {
29      "name" : "Eternal Flame",
30      "age" : 1000000,
31      "secretIdentity" : "Unknown",
32      "powers" : [
33        "Immortality",
34        "Heat Immunity",
35        "Inferno",
36        "Teleportation",
37        "Interdimensional travel"
38      ]
39    }
40  ]
41}

این داده‌ها در این آدرس (+) قابل دسترسی هستند. ما قصد داریم این داده‌ها را در صفحه خود بارگذاری کرده و از نوعی دستکاری DOM برای نمایش آن به صورت زیر استفاده کنیم:

به دست آوردن JSON

برای به دست JSON باید از یک API به نام XMLHttpRequest که غالباً XHR نامیده می‌شود استفاده کنیم. این یک شیء کاملاً مفید جاوا اسکریپت است که به ما امکان می‌دهد درخواست‌های شبکه برای بازیابی منابع (مانند تصاویر، متن، JSON و حتی قطعه کدهای HTML) را از طریق جاوا اسکریپت از سرور داشته باشیم. این بدان معنی است که می‌توانیم بخش‌های کوچکی از محتوا را بدون نیاز به بارگذاری مجدد کل صفحه، به‌روزرسانی کنیم. بدین ترتیب می‌توانیم صفحه‌هایی با واکنش‌گرایی بالاتر داشته باشیم. این وضعیت هیجان‌انگیز به نظر می‌رسد؛ اما بررسی این موضوع خارج از حیطه این مقاله است.

در آغاز قصد داریم URL مربوط به JSON را که می‌خواهیم بازیابی کنیم در یک متغیر ذخیره کنیم. به این منظور کد زیر را به انتهای کد جاوا اسکریپت خود اضافه کنید:

1var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

برای ایجاد درخواست، باید یک وهله از شیء درخواست جدید از سازنده XMLHttpRequest ایجاد کنیم. این کار با استفاده از کلیدواژه new انجام می‌یابد. کد زیر را پس از خط آخر اضافه کنید:

1var request = new XMLHttpRequest();

ما باید یک درخواست جدید را با استفاده از متد ()open باز کنیم. به این منظور کد زیر را اضافه کنید:

1request.open('GET', requestURL);

پارامترهای XMLHttpRequest

این کد دست‌کم دو پارامتر می‌گیرد. پارامترهای اختیاری دیگری نیز وجود دارند. ما برای این مثال ساده تنها به دو پارامتر اجباری نیاز داریم.

• متد HTTP که برای ایجاد درخواست شبکه مورد نیاز است و در این مورد GET مناسب است، چون می‌خواهیم صرفاً برخی داده‌های ساده را بازیابی کنیم.
• URL-ی که درخواست به آن ارسال می‌شود و این همان URL است که فایل JSON در آن قرار دارد و قبلاً در متغیری ذخیره کرده‌ایم.

سپس دو خط زیر را اضافه می‌کنیم. در این کد مقدار responseType را به صورت JSON تنظیم می‌کنیم و بدین ترتیب XHR می‌داند که سرور، کد JSON بازگشت خواهد داد و این که باید در پشت صحنه آن را به شیء جاوا اسکریپت تبدیل کند. سپس باید این درخواست را به متد ()send ارسال کنیم:

1request.responseType = 'json';
2request.send();

آخرین بخش کد شامل نوشتن پاسخ‌های بازگشتی از سرور و سپس کار کردن با آن‌ها است. کد زیر را در ادامه کدهای قبلی وارد کنید:

1request.onload = function() {
2  var superHeroes = request.response;
3  populateHeader(superHeroes);
4  showHeroes(superHeroes);
5}

ما در این کد پاسخ به درخواست خود را که در مشخصه response قرار دارد، در یک متغیر به نام superHeroes ذخیره می‌کنیم. این متغیر اینک شامل شیء جاوا اسکریپت مبتنی بر JSON است. سپس این شیء را به دو فراخوانی تابع ارسال می‌کنیم. مورد نخست آن است که عنصر <header> را با داده‌های صحیح پر می‌کند و تابع دوم آن است که یک کارت اطلاعاتی را برای هر قهرمان در تیم پر می‌کند و آن را درون <section> قرار می‌دهد.

ما کد خود را درون یک دستگیره رویداد قرار می‌دهیم که وقتی رویداد بارگذاری شیء درخواست رخ بدهد اجرا می‌شوند. دلیل این امر آن است که رویداد load زمانی رخ می‌دهد که پاسخ با موفقیت بازگشت یافته باشد. اجرای این کار به این ترتیب تضمین می‌کند که request.response هنگامی که به آن نیاز داریم، قطعاً در دسترس ما خواهد بود.

پر کردن مقادیر header

اینک که داده‌های JSON را بازیابی و آن‌ها را به شیء جاوا اسکریپت تبدیل کرده‌ایم، می‌توانیم با نوشتن دو تابع که در بخش فوق اشاره کردیم، از آن‌ها بهره‌برداری کنیم. قبل از هر چیز تعریف تابع زیر را به کد قبلی اضافه کنید:

1function populateHeader(jsonObj) {
2  var myH1 = document.createElement('h1');
3  myH1.textContent = jsonObj['squadName'];
4  header.appendChild(myH1);
5
6  var myPara = document.createElement('p');
7  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
8  header.appendChild(myPara);
9}

ما این پارامتر را jsonObj می‌نامیم تا به خودمان یادآوری کنیم که این شیء جاوا اسکریپت ریشه در JSON دارد. در این کد ابتدا یک عنصر <h1> با متد ()createElement می‌سازیم و خصوصیت textContent آن را برابر با مشخصه squadName شیء قرار می‌دهیم. سپس با استفاده از ()appendChild آن را به شیء الحاق می‌کنیم. در ادامه عملیات مشابهی را با یک پاراگراف انجام می‌دهیم یعنی آن را ایجاد، محتوای متنی آن را تعیین کرده و آن را به هدر الحاق می‌کنیم. تنها تفاوت در این است که متن آن برابر با رشته مرکب از دو مشخصه homeTown و formed شیء است.

ایجاد کارت‌های اطلاعاتی hero

در ادامه تابع زیر را به انتهای کد خود اضافه می‌کنیم که کارت‌های ابرقهرمان‌ها را ایجاد کرده و نمایش می‌دهد:

1function showHeroes(jsonObj) {
2  var heroes = jsonObj['members'];
3      
4  for (var i = 0; i < heroes.length; i++) {
5    var myArticle = document.createElement('article');
6    var myH2 = document.createElement('h2');
7    var myPara1 = document.createElement('p');
8    var myPara2 = document.createElement('p');
9    var myPara3 = document.createElement('p');
10    var myList = document.createElement('ul');
11
12    myH2.textContent = heroes[i].name;
13    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
14    myPara2.textContent = 'Age: ' + heroes[i].age;
15    myPara3.textContent = 'Superpowers:';
16        
17    var superPowers = heroes[i].powers;
18    for (var j = 0; j < superPowers.length; j++) {
19      var listItem = document.createElement('li');
20      listItem.textContent = superPowers[j];
21      myList.appendChild(listItem);
22    }
23
24    myArticle.appendChild(myH2);
25    myArticle.appendChild(myPara1);
26    myArticle.appendChild(myPara2);
27    myArticle.appendChild(myPara3);
28    myArticle.appendChild(myList);
29
30    section.appendChild(myArticle);
31  }
32}

در ابتدای این قطعه کد، مشخصه members شیء جاوا اسکریپت را در یک متغیر جدید ذخیره می‌کنیم. این آرایه شامل چند شیء است که محتوای اطلاعاتی در مورد هر قهرمان است. سپس یک حلقه for می‌سازیم که روی همه اشیای آرایه می‌چرخد. در مورد هر شیء موارد زیر را می‌توان برشمرد:

1. چند عنصر جدید ایجاد می‌شوند: یک <article>، یک <h2>، سه <p> و یک <ul>.
2. مقدار <h2> شامل name قهرمان کنونی است.
3. سه پاراگراف را با مقادیر secretIdentity و age پر می‌کنیم و یک خط با عبارت «:Superpowers» می‌نویسیم که این اطلاعات را در لیست نمایش دهد.
4. مشخصه powers در متغیر جدید دیگری به نام superPowers ذخیره می‌شود. این متغیر شامل آرایه‌ای است که «قدرت‌های ماورایی» (Superpowers) قهرمان کنونی را ذخیره می‌کند.
5. از حلقه for دیگری برای تعریف یک چرخه روی superpower-های قهرمان کنونی استفاده می‌کنیم. برای هر مورد یک عنصر <li> اضافه می‌کنیم که superpower قهرمان درون آن قرار می‌گیرد و سپس listItem را با استفاده از ()appendChild درون عنصر <ul> قرار می‌دهیم.
6. آخرین کاری که باید انجام دهیم، این است که <h2>, <p>-ها و <ul> را درون <article> قرار می‌دهیم و سپس <article> را درون <section> اضافه می‌کنم. ترتیب اضافه کردن این موارد به همان صورت که اشاره کردیم حائز اهمیت است، چون به این ترتیب درون HTML نمایش خواهد یافت.

نکته: اگر در اجرای این تمرین با مشکل مواجه شدید، می‌توانید با مراجعه به کد زیر اشکال خود را پیدا کنید:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5
6    <title>Our superheroes</title>
7
8    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
9    <link rel="stylesheet" href="style.css">
10  </head>
11
12  <body>
13
14      <header>
15
16      </header>
17
18      <section>
19
20      </section>
21
22    <script>
23    var header = document.querySelector('header');
24    var section = document.querySelector('section');
25    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
26    var request = new XMLHttpRequest();
27    request.open('GET', requestURL);
28    request.responseType = 'json';
29    request.send();
30    request.onload = function() {
31      var superHeroes = request.response;
32      populateHeader(superHeroes);
33      showHeroes(superHeroes);
34    }
35    function populateHeader(jsonObj) {
36      var myH1 = document.createElement('h1');
37      myH1.textContent = jsonObj['squadName'];
38      header.appendChild(myH1);
39      var myPara = document.createElement('p');
40      myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
41      header.appendChild(myPara);
42    }
43    function showHeroes(jsonObj) {
44      var heroes = jsonObj['members'];
45      for(var i = 0; i < heroes.length; i++) {
46        var myArticle = document.createElement('article');
47        var myH2 = document.createElement('h2');
48        var myPara1 = document.createElement('p');
49        var myPara2 = document.createElement('p');
50        var myPara3 = document.createElement('p');
51        var myList = document.createElement('ul');
52        myH2.textContent = heroes[i].name;
53        myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
54        myPara2.textContent = 'Age: ' + heroes[i].age;
55        myPara3.textContent = 'Superpowers:';
56        var superPowers = heroes[i].powers;
57        for(var j = 0; j < superPowers.length; j++) {
58          var listItem = document.createElement('li');
59          listItem.textContent = superPowers[j];
60          myList.appendChild(listItem);
61        }
62        myArticle.appendChild(myH2);
63        myArticle.appendChild(myPara1);
64        myArticle.appendChild(myPara2);
65        myArticle.appendChild(myPara3);
66        myArticle.appendChild(myList);
67        section.appendChild(myArticle);
68      }
69    }
70    </script>
71  </body>
72</html>

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

تبدیل بین اشیا و متن

مثال فوق بر حسب دسترسی به شیء جاوا اسکریپت ساده است، زیرا درخواست XHR را طوری تنظیم کرده‌ایم که با دستور زیر پاسخ JSON را مستقیماً به شیء جاوا اسکریپت تبدیل کند:

1request.responseType = 'json';

اما برخی اوقات چندان خوش‌شانس نیستیم، در برخی موارد یک رشته JSON خام دریافت می‌کنیم و باید آن را خودمان به یک شیء تبدیل کنیم. زمانی که می‌خواهیم یک شیء جاوا اسکریپت را روی شبکه ارسال کنیم، باید آن را قبل از ارسال به (یک رشته) JSON تبدیل کنیم. خوشبختانه این دو مسئله در زمینه توسعه وب چنان رایج هستند که شیء داخلی JSON در مرورگرها دو متد برای آن در نظر گرفته است:

• ()parse: یک رشته JSON را به عنوان پارامتر می‌پذیرد و شیء جاوا اسکریپت متناظر را بازگشت می‌دهد.
• ()stringify: یک شیء را به عنوان پارامتر می‌پذیرد و رشته JSON معادل را بازگشت می‌دهد.

مورد اول را در قطعه کد کامل که در بخش قبلی ارائه کردیم می‌توانید ببینید. این متد دقیقاً همان کاری را انجام می‌دهد که ما قبلاً ساختیم به جز این که XHR طوری تنظیم شده که یک متن JSON خام را بازگشت دهد و سپس از ()parse برای تبدیل آن به یک شیء جاوا اسکریپت واقعی استفاده می‌شود. قطعه کد اصلی به صورت زیر است:

1request.open('GET', requestURL);
2request.responseType = 'text'; // now we're getting a string!
3request.send();
4
5request.onload = function() {
6  var superHeroesText = request.response; // get the string from the response
7  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
8  populateHeader(superHeroes);
9  showHeroes(superHeroes);
10}

همان طور که احتمالاً حدس می‌زنید، ()stringify به طور معکوس عمل می‌کند. خطوط زیر را در کنسول جاوا اسکریپت مرورگر خود، یک به یک وارد کنید تا کارکرد آن را در عمل مشاهده نمایید:

1var myJSON = { "name": "Chris", "age": "38" };
2myJSON
3var myString = JSON.stringify(myJSON);
4myString

ما در این کد یک شیء جاوا اسکریپت ایجاد و سپس محتوای آن را بررسی و در نهایت آن را با استفاده از ()stringify به یک شیء JSON تبدیل می‌کنیم. سپس متغیر مقدار بازگشتی را در یک متغیر جدید ذخیره‌سازی می‌کنیم و آن را دوباره مورد بررسی قرار می‌دهیم.

جمع‌بندی

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

برای مطالعه قسمت بعدی این مجموعه مطلب آموزشی روی لینک زیر کلیک کنید:

• تمرین ساخت شیئ در جاوا اسکریپت — راهنمای کاربردی

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های طراحی وبسایت با HTML و CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• JSON برای پایتون — راهنمایی برای مبتدی‌ها
• آموزش طرز کار بلاک چین با PHP و JSON — راهنمای مقدماتی
• جیسون (JSON) چیست؟ — به زبان ساده

==