آموزش JSON در جاوا اسکریپت نحوه کارکردن با جیسون که یکی از بهترین ابزارهای انتقال داده بین دو پایگاه داده و از وب سرور به سمت اپلیکیشن تحت وب است را آموزش می‌دهد. جیسون یک فایل متنی است که می‌توان انواع داده‌های عددی، رشته‌ها، آرایه‌ها و حتی اشیا جاوا اسکریپت را درون آن ذخیره کرد. فایل جیسون بسیار کم‌حجم بوده و استفاده از آن نیز راحت است. برای استفاده از فایل متنی جیسون نیازمند پارس (parse) کردن آن خواهید بود. شما می‌توانید با استفاده از تابع stringify یک فایل متنی را به شی جاوا اسکریپت تبدیل کرده و داده‌های جیسون را نیز مرتب‌سازی کنید.
در بوت کمپ فرانت اند در زبان جاوا اسکریپت شما نحوه کارکردن با توابع مختلفی که جیسون ارائه می‌دهد را نیز می‌آموزید.
جیسون و ساختار آن در جاوا اسکریپت
انواع مختلفی از داده‌ها در زبان برنامه‌نویسی جاوا اسکریپت وجود دارند که قطعا جیسون یکی از محبوب‌ترین آنها به شمار می‌آید. آموزش JSON در جاوا اسکریپت به شما کمک می‌کند تا بتوانید به یک فرمت متنی برای داده‌ها دسترسی پیدا کرده و از آن در پروژه‌های خود استفاده کنید. جیسون مخفف JavaScript Object Notation است که قالبی استاندارد را برای ذخیره‌سازی متنی داده‌ها مبتنی بر سینتکس شی‌گرایی در جاوا اسکریپت ارائه می‌دهد. در بوت کمپ برنامه نویسی انواع مختلف داده ها مربوط به هر زبان برنامه نویسی را یاد میگیرید
اگر این سوال را دارید که داده‌های ذخیره شده در فایل json چیست؟ باید بدانید که این داده‌ها در واقع داده‌های متنی هستند که کاملا به زبان انسان نوشته شده‌اند و درک آنها راحت است. معمولا جیسون بهترین راهی است که برای ارتباط گرفتن با سرور در سایت‌ها و دریافت اطلاعات از سرور وجود دارد. امروزه بسیاری از محیط‌های برنامه‌نویسی از جیسون پشتیبانی کرده و به همین علت نیز این قالب به یک فرمت استاندارد جهانی در حوزه وب تبدیل شده است.
مزایای مهم استفاده از جیسون در پروژه‌های جاوا اسکریپت
استفاده از جیسون در پروژه‌های برنامه‌نویسی جاوا اسکریپت می‌تواند مزایای زیر را برای شما به همراه داشته باشد:
- فایل‌های جیسون بسیار کم‌حجم هستند و همین موضوع نیز باعث می‌شود تا ذخیره‌سازی، بارگذاری و استفاده از آنها راحت باشد.
- استاندارد و قالب جیسون در هر زبانی قابل استفاده خواهد بود و به اصطلاح به آن مستقل از زبان گفته می‌شود. پس وقتی که یک فایل جیسون با استفاده از جاوا اسکریپت ایجاد می‌شود شما در هر زبان دیگری نیز می‌توانید از این فایل جیسون استفاده کنید.
- درک فایل جیسون بسیار ساده بوده و همین موضوع نیز باعث می‌شود تا کارکردن با آن برای شما راحت باشد.
استفاده از جیسون چه کاربردهایی در جاوا اسکریپت دارد؟
آشنایی با کاربرد جیسون در جاوا اسکریپت به شما کمک می‌کند به شما کمک می‌کند تا به شکل بهتری بتوانید از این ابزار در پروژه‌های خود استفاده کنید. از جمله مهم‌ترین کاربردهای جیسون در پروژه‌های جاوا اسکریپت می‌توان به موارد زیر اشاره کرد:
- شما می‌توانید از آن برای انتقال داده‌های ساختاریافته در سطح وب و در پروژه‌های جاوا اسکریپت خود استفاده کنید.
- برای دریافت داده‌ها از سرور و ترسیم آنها در اپلیکیشن‌های تحت وب می‌توان از ساختار و فرمت جیسون استفاده کرد.
- وب‌سرویس‌های عمومی می‌توانند از جیسون برای انتشار داده‌های عمومی خود استفاده کنند.
- وقتی که قصد دارید داده‌ها و اطلاعات را از یک پایگاه داده به یک پایگاه داده دیگر منتقل کنید بهترین ساختاری که می‌توانید از آن استفاده کنید جیسون خواهد بود.
با ساختار کلی جیسون آشنا شوید
برای درک این موضوع که فرمت json چیست؟ شما نیازمند این خواهید بود که ساختار کلی جیسون را نیز بشناسید و بتوانید به شکلی درست و اصولی از آن استفاده کنید. به همین علت در این بخش قصد داریم توضیحات کاملی درباره ساختار کلی جیسون در اختیار شما قرار دهیم. داده‌های موجود در جیسون معمولا در یک ساختار نام-مقدار ذخیره می‌شوند. این بدان معناست که شما برای هر نوع داده می‌توانید یک نام تعیین کرده و مقداری را به آن اختصاص دهید. به این ترتیب هر زمان که خواستید می‌توانید از طریق نام آن داده به مقدار آن دسترسی پیدا کنید. برای اینکه بیشتر با این زبان برنامه نویسی آشنا شوید بهتر است مقاله کاربرد جاوا اسکریپت را مطالعه کنید.
برای اینکه به شکل بهتری این بخش از آموزش JSON در جاوا اسکریپت را بیاموزید به مثال زیر توجه داشته باشید که یک فایل جیسون را به شما نمایش می‌دهد:
{
“squadName”: “Super hero squad”,
“homeTown”: “Metro City”,
“formed”: 2016,
“secretBase”: “Super tower”,
“active”: true,
“members”: [
{
“name”: “Molecule Man”,
“age”: 29,
“secretIdentity”: “Dan Jukes”,
“powers”: [“Radiation resistance”, “Turning tiny”, “Radiation blast”]
},
{
“name”: “Madame Uppercut”,
“age”: 39,
“secretIdentity”: “Jane Wilson”,
“powers”: [
“Million tonne punch”,
“Damage resistance”,
“Superhuman reflexes”
]
},
{
“name”: “Eternal Flame”,
“age”: 1000000,
“secretIdentity”: “Unknown”,
“powers”: [
“Immortality”,
“Heat Immunity”,
“Inferno”,
“Teleportation”,
“Interdimensional travel”
]
}
]
}
همانطور که در این فایل جیسون نیز می‌توانید مشاهده کنید شما در یک جیسون می‌توانید هر نوع داده‌ای را ذخیره کنید. برای مثال شما می‌توانید انواع داده‌های عددی، رشته‌ها، آرایه‌ها و … را ذخیره کنید بدون اینکه محدودیتی برایتان وجود داشته باشد.
چه نوع داده‌هایی را می‌توان در جیسون ذخیره کرد؟
در یادگیری برنامه نویسی آشنایی با انواع داده‌های Json به شما کمک می‌کند تا بتوانید به بهترین شکل ممکن از جیسون در جاوا اسکریپت استفاده کنید. از جمله محبوب‌ترین انواع داده‌هایی که می‌توان از آنها در جیسون استفاده کرد عبارت‌اند از:
- داده‌های عددی: این داده‌ها شامل انواع داده‌های Integer، Double، Float و… می‌شوند.
- رشته‌ها: شما می‌توانید انواع رشته‌ها با طول متفاوت را در جیسون ذخیره کنید.
- بولین: نوع داده‌های 0 و 1 یا true و false که با نام بولین شناخته می‌شوند نیز در جیسون قابل ذخیره‌سازی خواهند بود.
- آرایه: شما می‌توانید انواع آرایه‌ها با اندازه‌های متفاوت را نیز در فایل جیسون ذخیره کنید.
- شی: یک شی به همراه تمام ویژگی‌هایی که دارد قابل ذخیره‌سازی در فایل جیسون خواهد بود.
- Null: شاید برای شما جالب باشد که بدانید می‌توانید نوع داده Null را نیز در یک فایل جیسون ذخیره کنید.
دریافت اطلاعات از یک فایل جیسون در جاوا اسکریپت
در ادامه آموزش JSON در جاوا اسکریپت گاهی اوقات ممکن است در یک پروژه فایل جیسونی در اختیار شما قرار گرفته و از شما خواسته شود تا اطلاعات مربوط به آن را دریافت کنید. در این شرایط شما باید از قطعه کدی در جاوا اسکریپت استفاده کرده و به اصطلاح فایل جیسون خود را پارس کنید. برای اینکه بتوانید این کار را انجام دهید مثلا فایل جیسونی را در نظر بگیرید که از جیسون زیر تشکیل شده است:
‘{“name”:”John”, “age”:30, “city”:”New York”}’
دقت داشته باشید که این یک فایل متنی است و به همین سادگی نمی‌توانید آن را در یک صفحه وب نمایش دهید. قطعه کد زیر به شما نشان می‌دهد که به چه شکل می‌توانید آن را به یک شی جاوا اسکریپت تبدیل کنید:
const obj = JSON.parse(‘{“name”:”John”, “age”:30, “city”:”New York”}’);
حال اگر بخواهید این شی را در یک صفحه وب نمایش دهید می‌توانید از قطعه کد زیر برای این کار استفاده کنید:
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = obj.name;
</script>
حال فرض کنید که شما قصد دارید همین اطلاعات را در قالب یک آرایه دریافت کنید. برای انجام این کار کافی است که قطعه کد زیر را استفاده کنید:
const text = ‘[“Ford”, “BMW”, “Audi”, “Fiat”]’;
const myArr = JSON.parse(text);
در زمان کارکردن با جیسون در جاوا اسکریپت باید دقت داشته باشید که نمی‌توانید نوع داده Date را وارد جیسون کنید. برای اینکه بتوانید تاریخ را وارد جیسون کنید نیازمند این هستید که آن را در قالب رشته دربیاورید. قطعه کد زیر این مسئله را به شما نشان می‌دهد:
const text = ‘{“name”:”John”, “birth”:”1986-12-14″, “city”:”New York”}’;
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById(“demo”).innerHTML = obj.name + “, ” + obj.birth;
نکته مهم دیگری که در هنگام استفاده از هر نوع داده‌ای مانند رشته‌ها در Json باید به آن دقت داشته باشید این است که نمی‌توانید توابع را به‌صورت مستقیم وارد فایل جیسون خود کنید. پس اگر نیازمند انجام این کار هستید باید آن را نیز به شکل یک رشته دربیاورید. برای درک هرچه بهتر این موضوع مثال زیر را مشاهده کنید:
const text = ‘{“name”:”John”, “age”:”function () {return 30;}”, “city”:”New York”}’;
const obj = JSON.parse(text);
obj.age = eval(“(” + obj.age + “)”);
document.getElementById(“demo”).innerHTML = obj.name + “, ” + obj.age();
چگونه می‌توانیم آرایه‌ها را در جیسون تعریف کنیم؟
JSON در جاوا اسکریپت چیست؟ به طور کلی باید توجه داشته باشید که جیسون‌ها ساختار داده‌هایی هستند که امکان ذخیره‌سازی انواع دیگر داده در جاوا اسکریپت از جمله آرایه‌ها را برای شما فراهم می‌کنند. شما می‌توانید خیلی راحت آرایه‌های مختلفی را در یک فایل جیسون تعریف کنید. برای اینکه بتوانید درک بهتری از این موضوع به دست بیاورید پیشنهاد می‌کنیم قطعه کد زیر را به دقت بررسی کنید:
[
{
“name”: “Molecule Man”,
“age”: 29,
“secretIdentity”: “Dan Jukes”,
“powers”: [“Radiation resistance”, “Turning tiny”, “Radiation blast”]
},
{
“name”: “Madame Uppercut”,
“age”: 39,
“secretIdentity”: “Jane Wilson”,
“powers”: [
“Million tonne punch”,
“Damage resistance”,
“Superhuman reflexes”
]
}
]
همانطور که در این قطعه کد نیز مشاهده می‌کنید ما درون یک فایل جیسون یک آرایه تعریف کرده و مقادیری را درون این آرایه قرار داده‌ایم. یکی از مباحثی که در زبان جاوا اسکریپ ممکن است با آن مواجه شوید فریم ورک های جاوا اسکریپت هستند که بهتر است یاد بگیرید
استفاده از تابع stringify در جیسون
وقتی صحبت از آموزش JSON در جاوا اسکریپت می‌شود باید به این نکته بسیار مهم دقت داشته باشید که جیسون دارای توابع متعددی در جاوا اسکریپت است که شما می‌توانید از آنها استفاده کرده و راحت‌تر با جیسون کار کنید. یکی از محبوب‌ترین این توابع، تابع stringify است. این تابع برای تبادل داده بین وب سرور و اپلیکیشن استفاده می‌شود. دقت داشته باشید وقتی که قصد دارید داده‌ها را به وب سرور ارسال کنید آنها حتما باید در قالب رشته باشند و به همین علت شما باید یک شی جاوا اسکریپت را به رشته تبدیل کنید.
برای این کار نیز می‌توانید از تابع stringify استفاده کنید. قطعه کد زیر نحوه انجام این کار را به شما نشان می‌دهد:
فرض کنید ما یک شی جاوا اسکریپت داریم که به شکل زیر تعریف شده است:
const obj = {name: “John”, age: 30, city: “New York”};
حال اگر بخواهیم آن را به یک رشته تبدیل کرده و سپس به وب سرور خود ارسال کنیم می‌توانیم خیلی راحت از کد زیر برای انجام این کار استفاده کنیم:
const myJSON = JSON.stringify(obj);
فراموش نکنید که شما این تابع را می‌توانید حتی روی آرایه‌های جاوا اسکریپت نیز اجرا کنید که این موضوع در بوت کمپ فرانت اند نیز بررسی خواهد شد. با این حال باید بدانید که با استفاده از کد زیر می‌توانید این کار را انجام دهید:
const arr = [“John”, “Peter”, “Sally”, “Jane”];
const myJSON = JSON.stringify(arr);
شاید این سوال برای شما هم به وجود آمده باشد که آیا امکان دارد که تاریخ را نیز در جیسون stringify کنیم؟ در پاسخ به این سوال باید گفت که خیر شما نمی‌توانید تاریخ را وارد جیسون کنید و برای اینکه بتوانید چنین کاری انجام دهید حتما باید تاریخ را در قالب متن بیاورید که قطعه کد زیر نحوه انجام این کار را به شما نشان خواهد داد:
const obj = {name: “John”, today: new Date(), city : “New York”};
const myJSON = JSON.stringify(obj);
آیا می‌توان داده‌ها را در جیسون مرتب‌سازی کرد؟
مرتب‌سازی داده‌ها یک مسئله بسیار مهم در بوت کمپ برنامه نویسی جاوا اسکریپت به شمار می‌آید که شما برای کارکردن با جیسون در این زبان نیز باید آن را بیاموزید. دقت داشته باشید که وقتی قصد دارید داده‌های خود را مرتب‌سازی کنید، داده‌های شما حتما باید دارای ساختار خاصی باشند. معمولا داده‌های متنی قانونی‌ترین ساختار برای شما خواهند بود. قطعه کد زیر به شما نشان می‌دهد که دقیقا به چه شکل می‌توانید این کار را انجام دهید:
// Storing data:
const myObj = {name: “John”, age: 31, city: “New York”};
const myJSON = JSON.stringify(myObj);
localStorage.setItem(“testJSON”, myJSON);
// Retrieving data:
let text = localStorage.getItem(“testJSON”);
let obj = JSON.parse(text);
document.getElementById(“demo”).innerHTML = obj.name;
سخن پایانی
آموزش JSON در جاوا اسکریپت نحوه کارکردن با جیسون را به شما آموزش می‌دهد. به طور کلی جیسون ساختاری هدفمند برای ارائه داده‌ها در قالب شی‌گرای جاوا اسکریپت است که امکان ذخیره‌سازی انواع داده‌ها را برای شما فراهم می‌کند. در آموزش promise در جاوا اسکریپت شما یاد میگیرید که به چه شکل می‌توانید با جیسون در این زبان کار کرده و البته به چه شکل می‌توانید توابع آن را پیاده‌سازی کنید. فراموش نکنید که جاوا و جاوا اسکریپت باهم متفاوت هستند برای یادگیری بیشتر تفاوت جاوا و جاوا اسکریپت با ما همراه باشید.
