از آنجایی که JSON از زبان برنامه نویسی جاوا اسکریپت مشتق شده است، استفاده از آن به عنوان فرمت داده در جاوا اسکریپت یک انتخاب طبیعی است. JSON، مخفف عبارت JavaScript Object Notation، که به صورت «Jason» تلفظ می‌شود.
در این مقاله قصد داریم آموزش JSON در جاوا اسکریپت را به طور کامل ارائه دهیم؛ تا علاقه مندان به این مبحث جذاب نهایت استفاده را ببرند. در صورتی که به زبان برنامه نویسی جاوا اسکریپت آشنایی کامل را ندارید می توانید دوره آموزش جاوا اسکریپت از آکادمی آی تی مشاهده کنید.

 

JSON چیست؟

JSON قالبی برای اشتراک گذاری داده است. همانطور که از نام آن پیداست، JSON از زبان برنامه نویسی جاوا اسکریپت مشتق شده است، اما برای بسیاری از زبان ها از جمله Python، Ruby، PHP و Java در دسترس است.
JSON با پسوند .json شناخته میشود. هنگامی که در قالب فایل دیگری (مانند html)، تعریف میشود؛ میتواند در داخل نقل قول ها به عنوان یک رشته JSON ظاهر شود، یا میتواند یک شی اختصاص داده شده به یک متغیر باشد. انتقال این فرمت بین وب سرور و کلاینت یا مرورگر آسان است.

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

 

نحوه و ساختار  JSON

یک شی JSON، یک داده کلیدمقدار است که بین دو آکولاد قرار میگیرد. هنگامی که با JSON کار میکنید، احتمالاً اشیاء JSON را در یک فایل json. میبینید، اما آنها میتوانند به عنوان یک شی یا رشته JSON در متن یک برنامه نیز وجود داشته باشند.
یک شی JSON چیزی شبیه به این است:

{
"first_name" : "Alireza",
"last_name" : "Soheili",
"location" : "Tehran",
"online" : true,
"followers" : 987
}

اگرچه این یک مثال بسیار کوتاه است، و JSON می‌تواند خطوط زیادی داشته باشد، بیشتر داده های مورد استفاده در JSON در نهایت در یک شی JSON بین {} کپسوله میشوند.

مقادیر JSON میتواند یکی از 6 نوع داده باشد:

•  رشته ای(String)
•  شماره(Number)
•  اشیاء(Object)
•  آرایه ها(Array)
•  بولین (Boolean) که به صورت True و False نمایش داده می¬شود.
•  خالی(Null)

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

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

 

اشیا تو در تو

در فایل users.json زیر، برای هر یک از چهار کاربر ("Alireza"، "Ryan"، "Fatemeh"، "Moein") یک شیء تودرتو JSON وجود دارد که به عنوان مقدار برای هر یک از کاربران ارسال می شود. کلیدهای تودرتوی "نام کاربری" و "مکان" که به هر یک از کاربران مربوط می شود.

{
"Alireza" :
"username"  : "Soheili",
"location"  : "Tehran",
"online"    : true,
"followers" : 987
} 
"Ryan" : {
"username"  : "Abdi",
"location"  : "Karaj",
"online"    : false,
"followers" : 432
},
"Fatemeh" : {
"username"  : "Khosravi",
"location"  : "Mashhad",
"online"    : false,
"followers" : 321
},
"Moein" : {
"username"  : "Rafie",
"location"  : "Bojnord",
"online"    : true,
"followers" : 654
}
}

 

آرایه های تودرتو

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

زمانی که با داده‌های زیادی سروکار داریم؛ که می‌توانند به راحتی با هم گروه‌بندی شوند، نیاز است از آرایه‌ استفاده کنیم؛ مانند زمانی که وب‌سایت‌ها و رسانه‌های اجتماعی یک کاربر، مد نظر است.

به مثال زیر توجه کنید تا بیشتر متوجه شوید:

{
"first_name" : "Alireza",
"last_name" : "Soheili",
"location" : "Tehran",
"websites" : [
{
"description" : "work",
"URL" : "https://www.Example1.com/"
},
{
"desciption" : "tutorials",
"URL" : "https://www.Example.com/community/tutorials"
}
],
"social_media" : [
{
"description" : "twitter",
"link" : "https://twitter.com/Example"
},
{
"description" : "facebook",
"link" : "https://www.facebook.com/Example"
},
{
"description" : "github",
"link" : "https://github.com/Example"
}
]
}

حالا که با مبحث JSON آشنا شدیم؛ در ادامه به آموزش JSON در جاوا اسکریپت می پردازیم. با ما همراه باشید.

 

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

برخی از موارد استفاده عمومی از JSON در جاوا اسکریپت عبارتند از:

•    ذخیره سازی داده ها
•    ایجاد ساختارهای داده از ورودی کاربر
•    انتقال داده ها از سرور به مشتری، مشتری به سرور و سرور به سرور
•    پیکربندی و تأیید داده ها

 

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

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

اگر بخواهیم به داده های موجود در شی جاوا اسکریپت، دسترسی داشته باشیم؛ می توانیم از علامت نقطه برای فراخوانی user.first_name استفاده کنیم. و یک رشته دریافت کنید، اما اگر بخواهیم به نام کامل دسترسی داشته باشیم، باید این کار را با فراخوانی ;()user.full_name زیرا یک تابع است.

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

 

دسترسی به داده های JSON

داده‌های JSON معمولاً در جاوا اسکریپت از طریق علامت نقطه قابل دسترسی هستند. برای درک اینکه چگونه این کار می کند، به مثال زیر توجه کنید:

var alireza = {
"first_name"  :  "Alireza",
"last_name"   :  "Soheili",
"online"      :  true
}

برای دسترسی به هر یک از مقادیر، از نماد نقطه استفاده می کنیم که به شکل زیر است:

alireza.first_name
alireza.last_name
alireza.online

برای فراخوانی مقدار مربوط در جاوا اسکریپت، می¬توانیم با فراخوانی تابع  ; ()alertاین کار را انجام دهیم:
به مثال زیر توجه کنید:

alert(sammy.first_name);

که خروجی آن به شکل زیر می باشد:

Alireza

در اینجا، ما با موفقیت مقدار مرتبط با کلید first_name را از شی alireza JSON فراخوانی کردیم.

همچنین می‌توانیم به این شکل هم کد نویسی کنیم و خروجی یکسان دریافت کنیم:

alert(alireza["first_name"]);

هنگامی که با عناصر آرایه تودرتو کار می کنیم؛ باید به صورت زیر، آرایه ها را فراخوانی کنیم. بیایید JSON زیر را در نظر بگیریم:

var user_profile = {
"username" : "Alireza",
"social_media" : [
{
"description" : "twitter",
"link" : "https://twitter.com"
},
{
"description" : "facebook",
"link" : "https://www.facebook.com"
},
{
"description" : "github",
"link" : "https://github.com"
}
]
}

برای دسترسی به رشته فیسبوک، می‌توانیم آن آیتم را در آرایه به صورت زیر، فراخوانی کنیم:

alert(user_profile.social_media[1].description);

خروجی:
Facebook

 

توابع کار با JSON

این بخش به دو روش stringify و parse  انجام می شود.

()JSON.stringify

تابع()JSON.stringify یک شی را به رشته JSON تبدیل می کند. رشته ها برای انتقال داده ها از یک کلاینت به یک سرور از طریق ذخیره یا ارسال اطلاعات، مفید هستند. به عنوان مثال، می‌توانیم تنظیمات یک کاربر را در سمت کلاینت، جمع‌آوری کنیم و سپس آنها را به سرور ارسال کنیم. سپس می توانیم اطلاعات را با متد ()JSON.parse فراخوانی کنیم.

به این مثال توجه کنید:

var obj = {"first_name" : "Alireza", "last_name" : "Soheili", "location": "Tehran"} var s = JSON.stringify(obj)

متغیر s ، JSON  را به‌عنوان یک رشته، در دسترس قرار می دهد.(به صورت کدی که در قسمت پایین مشاهده می کنیم)

'{"first_name" : "Sammy", "last_name" : "Shark", "location": "Ocean"}"

تابع ()JSON.stringify به ما امکان می دهد اشیاء را به رشته تبدیل کنیم. در صورتی که ()JSON.parseعکس این کار را انجام می دهد.

()JSON.parse

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

برای مثال: در بخش ()JSON.stringifyدرقسمت بالا، رشته s را به تابع ارسال می¬کنیم و آن را به یک متغیر جدید اختصاص می دهیم:

var o = JSON.parse(s)

سپس، ما متغیر o را برای این کار خواهیم داشت که با شی obj یکسان است. برای نگاهی عمیق تر، بیایید نمونه ای از () JSON.parse را در زمینه یک فایل HTML در نظر بگیریم:

<!DOCTYPE html>
<html>
<body>

<p id="user"></p>

<script>
    var s = '{"first_name" : "Alireza", "last_name" : "Soheili", "location" : "Tehran"}';

    var obj = JSON.parse(s);

    document.getElementById("user").innerHTML =
        "Name: " + obj.first_name + " " + obj.last_name + "<br>" +
        "Location: " + obj.location;
</script>

</body>
</html>

خروجی:

Name: Alireza Soheili
Location: Tehran

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

 

کلام آخر

JSON  یک فرمت مختصر برای استفاده در جاوا اسکریپت است و برای استفاده در بسیاری از زبان های برنامه نویسی محبوب در دسترس است. اگر می‌خواهید بدانید JSON از چه زبان های برنامه‌نویسی دیگری پشتیبانی می کند، می‌توانید لیست کامل زبان ها را در سایت JSON  مشاهده کنید.

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