آموزش JSON در جاوا اسکریپت

جاوا اسکریپت یک زبان برنامه نویسی مبتنی بر شی است که نحوه عملکرد صفحات وب را تعیین می کند. در جاوا اسکریپت داده هایی از نوع String Number ،Boolean ،Null ،Undefied وجود دارد. متغیر ها درجاوا اسکریپت مقدار این داده ها را در خود ذخیره می کنند و این متغیرها می توانند یک مقدار بگیرند. اشیاء در جاوا اسکریپت نیز متغیر هستند با این تفاوت که می توانند مقادیر متعددی را در خود ذخیره کنند. می توانید با مطالعه مقاله ی "جاوا اسکریپت چیست" بیشتر با مفهوم جاوا اسکریپت آشنا شوید.

Json قالبی است که این اشیاء را به صورت آرایه و لیستی از اشیاء از سرور به صفحات وب ارسال می کند. در این مقاله با آموزش کار با json در جاوا اسکریپت همراه ما باشید.

JSON چیست؟

JSON مخفف عبارت JavaScript Object Notation است.

Json قالبی برای ذخیره و حمل ونقل داده ها است؛ که اغلب برای فرستادن داده ها از سرور به صفحه وب از آن استفاده می کنیم.

Json ساختار نام/مقدار (name/value) دارد و فهم کدهای آن بسیار آسان است ؛ به همین دلیل می گویند Json خودتوصیف (self-describing) است. در نحوه نوشتن Json از نحوه نوشتن اشیاء جاوا اسکریپت الگو گرفته شده است و قالب آن با قالب کدهای ایجاد اشیاء در جاوا اسکریپت یکسان است.

Json مانند XML است ولی اغلب Json را به دلیل خوانایی بیشتر کدهای آن و محبوبیت جاوا اسکریپت به XML ترجیح می دهند.

XML چیست؟

XML مخفف Extensible Markup Language است و زبان نشانه گذاری توسعه پذیر است. این زبان برای جابه جایی داده ها مورد استفاده قرار می گیرد. XML داده ها و اطلاعات را بدون قالب خاصی در خود ذخیره می کند؛ به همین دلیل می توان در هر سیستمی آن را حمل کرد و نیاز به نرم افزار و سخت افزار خاصی ندارد.

ظاهر Json

• داده ها در Json به صورت نام/مقدار قرار می گیرند.
• داده ها با علامت کاما از هم جدا می شوند.
• اشیاء با علامت { } نشان داده می شوند.
• آرایه ها با علامت [ ] نشان داده می شوند.

مثالی از Json

برای مثال یک شی با نام ماشین ها داریم که مقدار این شی آرایه ای شامل دو عنصر است. هر عنصر یک شی است که شامل مشخصات ماشین می شود.

{
"cars":[
    {"Name":"BMW", "color":"black"},
    {"Name":"Benz", "color":"red"}
]
}                                                                                         

داده های Json

داده های Json به صورت زوج های name/value نوشته می شوند؛ دقیقا مانند خصوصیات اشیاء جاوا اسکریپت با این تفاوت که نام ها در Json باید درون جفت کوتیشن قرار گیرند اما در جاوا اسکریپت به این شکل نمی باشد.

"firstname" : "ali"

انواع داده های Json

انواع داده ها در Json عبارتند از:

• String
• Number
• Object
• Array
• Boolean
• Null

مقادیر زیر نمی توانند جزء داده های Json باشند:

• Function
• Date
• Undefined

رشته ها در Json

رشته ها در Json باید در داخل جفت کوتیشن قرار بگیرند. برای مثال:

{"name" : "ali"}

اعداد در Json   

اعداد باید یک مقدار صحیح و اعشاری باشند. برای مثال:

   {"age":26}

اشیاء در Json

مقادیر در json می توانند object باشند. برای مثال:

{
"cars": {"Name":"BMW", "color":"black"}
}                                                                                                    

آرایه هادر Json

مقادیر در json می توانند آرایه باشند. برای مثال:

{
"cars":[ "BMW", "Benz"]
}                                                                                                     

مقادیر boolean در Json

مقادیر در Json می تواند true و یا false باشند. برای مثال:

{"sale":true}

مقدار null در Json

مقادیر در Json می تواند null باشند.

تابع ()JSON.parse

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

var obj = JSON.parse('{ "name":"ali", "age":30, "city":"NewYork"}');

تابع ()JSON.stringify

با استفاده از تابع  JSON.stringify می توان یک شی JavaScript را به یک رشته تبدیل کرد.

var obj = { name: "ali", age: 30, city: "New York" };
var myJSON = JSON.stringify(obj);

در مثال بالا myJSON یک رشته است که آماده فرستاده شدن به سمت سرور است.

با استفاده از این تابع همچنین می توان آرایه های جاوا اسکریپت را به رشته تبدیل کرد.

var arr = [ "ali", "sara", "shiva", "reza" ];
var myJSON = JSON.stringify(arr);

اشیاء Json

اشیاء Json درون علامت {} نوشته می شوند. نام ها باید رشته ای و مقادیر باید یک نوع داده Json باشند.

• می توانیم با علامت "." به مقادیر شی دسترسی پیدا کنیم:

cars= {"name":"BMW", "color":"black"};
x = cars.name;

• همچنین می توانیم با علامت [ ] به مقادیر شی دسترسی پیدا کنیم:

x = cars["name"];

• مقادیر موجود در یک شی Json می توانند داخل یک شی Json دیگر باشد:

myObj = {
  "name":"ali",
  "age":25,
  "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
  } }

• با استفاده از علامت نقطه و براکت می توان به اشیاء تودرتو دسترسی پیدا کرد:

x = myObj.cars.car2;

یا

x = myObj.cars["car2"];

• همچنین می توان از علامت نقطه برای تغییر مقدار هر شی Json استفاده کرد.

آرایه های Json

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

["Ford", "BMW", "Fiat" ]

• آرایه ها می توانند مقادیر یک شی باشند:

{
"name":"ali",
"age":25,
"cars":[ "Ford", "BMW", "Fiat" ]
}

• با استفاده از شماره شاخص می توان به مقدار هر آرایه دسترسی پیدا کرد و مقدار آن را تغییر داد:

x = myObj.cars[0];
myObj.cars[1] = "Mercedes";

شباهت های JSON و XML

از json و XML می توان برای دریافت داده از وب سرور استفاده کرد. هر دو خود توصیف هستند و فهم کدهای آن ها بسیار آسان است. هر دو می توانند توسط بسیاری از زبان های برنامه نویسی مورد استفاده قرار بگیرند. هر دو را می توان با XMLHttpRequest دریافت کرد.

 جمع بندی

همان طور که در این مقاله (آموزش json در جاوا اسکریپت) خواندیم JSON قالبی سبک است که با استفاده از آن می توانیم داده ها را ذخیره کنیم و در صفحات وب به اشتراک بگذاریم. JSON قالبی است که خودش ساختار خود را تعریف می کند؛ به این صورت که داده ها در آن به صورت زوج های نام/مقدار قرار می گیرند و با علامت کاما ازهم جدا می شوند و این داده ها می توانند string، number، object، array، boolean و null باشند و اشیاء با علامت { } و آرایه ها با علامت [ ] نشان داده می شوند. JSON در اصل از زبان برنامه نویسی جاوا اسکریپت برگرفته شده است و در زبان های برنامه نویسی دیگر مانند #php ،python ،c و.... خوانده و استفاده می شود.

امیدوارم با مطالعه این مقاله به مفهوم  JSON و کاربرد آن پی برده باشید. اگر سوالی داشتید می توانید در بخش نظرات با ما در میان بگذارید.

اگر به یادگیری بیشتر در زمینه جاوا اسکریپت علاقه داری، با شرکت در دوره آموزش جاوا اسکریپت در کمتر از یک سال به یک متخصص JS همه فن حریف تبدیل می شوی که آماده ی استخدام، دریافت پروژه و یا فول-استک شدن هستی.