جاوا اسکریپت یک زبان برنامهنویسی مبتنی بر شی است که نحوه عملکرد صفحات وب را تعیین میکند. در جاوا اسکریپت دادههایی از نوع 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
برای مثال یک شی با نام ماشینها داریم که مقدار این شی آرایهای شامل دو عنصر است. هر عنصر یک شی است که شامل مشخصات ماشین میشود.
دادههای 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 دیگر باشد:
با استفاده از علامت نقطه و براکت میتوان به اشیاء تودرتو دسترسی پیدا کرد:
x = myObj.cars.car2;
یا
x = myObj.cars["car2"];
همچنین میتوان از علامت نقطه برای تغییر مقدار هر شی Json استفاده کرد.
آرایههای Json
آرایههای Json تقریبا شبیه به آرایههای موجود در جاوا اسکریپت هستند. آرایههای Json درون براکت قرار میگیرند. در Json مقادیر آرایه باید از نوع رشته، عدد، شی، آرایه، بولین یا تهی باشند ولی در جاوا اسکریپت مقادیر آرایه علاوه بر موارد بالا، تابع، تاریخ و تعریف نشده میتوانند باشند.
با استفاده از شماره شاخص میتوان به مقدار هر آرایه دسترسی پیدا کرد و مقدار آن را تغییر داد:
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 همه فن حریف تبدیل میشوی که آمادهی استخدام، دریافت پروژه و یا فول-استک شدن هستی.
سلام
نگفتید چجوری فایلو بخونم من اوردم JSON.parse('test.json') ولی نخوندو یهمچین خطایی میده
Uncaught SyntaxError: JSON.parse: unexpected keyword at line 1 column 1 of the JSON data
نازنین کریمی مقدم۱۹ شهریور ۱۴۰۲، ۰۸:۴۶
درود
<a href="https://stackoverflow.com/questions/25743994/syntaxerror-json-parse-unexpected-character-at-line-1-column-1-of-the-json-dat" target="_blank" rel="noopener nofollow ugc">راهکارهای این تاپیک</a> رو بررسی کنید.
۲۸ تیر ۱۴۰۲، ۰۷:۴۴
جیسون خوبه ولی چجوری اطلاعات ذخیره شده توشو بیارم تو وبسایت؟ مثلا یک دایو دارم میخوام توش بیاره مقدار یک ستونی تو فایل json
نازنین کریمی مقدم۲۸ تیر ۱۴۰۲، ۱۹:۴۲
درود
اگر جیسون داخل سورس قرار داره میتونید فایل رو بخونید و درون یک متغیر آرایه ای ذخیره کنید.
اگر درون اطلاعات پایگاه داده ذخیره شده باید از rest api استفاده کنید.
۰۲ مرداد ۱۴۰۲، ۱۴:۵۴
یس فقط یکچیز دیگر .. به سوال اولم وارد کردن فایل json پاسخ دادید ولی به سوال دومم یعنی بخش انتقال اطلاعات از فایل json به div داخل فایل html پاسخ ندادید