آموزش JSON در جاوا اسکریپت
JSON (JavaScript Object Notation) یک فرمت متنی ساده و سبک برای تبادل داده‌ها است که به راحتی قابل خواندن و نوشتن توسط انسان و نیز قابل پردازش توسط ماشین است. در جاوا اسکریپت، JSON به طور گسترده‌ای برای ارسال و دریافت داده‌ها از و به سرورها استفاده می‌شود. در اینجا به اصول اساسی کار با JSON در جاوا اسکریپت می‌پردازیم:
-
تبدیل بین JSON و جاوا اسکریپت:
-
تبدیل به JSON: برای تبدیل یک شیء جاوا اسکریپت به فرمت JSON، از متد JSON.stringify() استفاده می‌کنید. این متد شیء جاوا اسکریپت را به یک رشته JSON تبدیل می‌کند.
-
سادگی و تطبیق‌پذیری آن، JSON را به بخشی اساسی از توسعه وب مدرن تبدیل کرده است. در این مطلب از مجله سبزلرن این بار می‌خواهیم که در رابطه با JSON در جاوا اسکریپت به صورت عملی و کاربردی توضیحاتی مطلوب ارائه کنیم. اگر می‌خواهید بدانید که رسالت جیسون در جاوا اسکریپت چیست و برای چه مواردی استفاده می‌شود، حتماً ادامه این مطلب را دنبال کنید.
const person = { name: “John”, age: 30 };
const jsonString = JSON.stringify(person);
console.log(jsonString); // {“name”:”John”,”age”:30}
تبدیل از JSON: برای تبدیل یک رشته JSON به شیء جاوا اسکریپت، از متد JSON.parse() استفاده می‌کنید. این متد رشته JSON را به یک شیء جاوا اسکریپت تبدیل می‌کند.
const jsonString = ‘{“name”:”John”,”age”:30}’;
const person = JSON.parse(jsonString);
console.log(person.name); // John
-
کاربردهای متداول JSON:
- ارسال داده به سرور: زمانی که داده‌ها را از یک فرم به سرور ارسال می‌کنید، معمولاً آن‌ها را به فرمت JSON تبدیل می‌کنید.
- دریافت داده از سرور: داده‌های دریافتی از یک سرور معمولاً به فرمت JSON هستند که با استفاده از fetch یا axios دریافت و پردازش می‌شوند.
-
کار با JSON در اپلیکیشن‌های وب:
-
Fetch API: با استفاده از fetch می‌توانید داده‌های JSON را از یک API دریافت کنید و آن‌ها را با JSON.parse() تجزیه کنید.
-
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => console.log(data));
ارسال داده با Fetch API: برای ارسال داده‌ها به سرور، می‌توانید داده‌های خود را به فرمت JSON تبدیل کرده و ارسال کنید.
const data = { name: “John”, age: 30 };
fetch(‘https://api.example.com/submit’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => console.log(result));
آشنایی با JSON و نحوه استفاده از آن در جاوا اسکریپت برای هر توسعه‌دهنده وب ضروری است و به شما کمک می‌کند تا به طور مؤثر با داده‌ها کار کنید. برای یادگیری عمیق‌تر و عملی در زمینه جاوا اسکریپت و JSON، مجتمع فنی تهران دوره‌های آموزش جاوا اسکریپت را با مدرک معتبر برگزار می‌کند که می‌تواند به شما در ارتقاء مهارت‌های برنامه‌نویسی و توسعه وب کمک کند.
JSON در جاوا اسکریپت چیست؟
علامت‌گذاری شی جاوا اسکریپت که به اختصار JSON نامیده می‌شود، به عنوان نوعی قالب داده مبتنی بر متن برای ذخیره و انتقال اطلاعات استفاده می‌شود. جیسون در جاوا اسکریپت از نوعی ساختار جفت کلید/مقدار استفاده می‌کند که مثال زیر بیانگر این هدف است:
{
“name”: “John”,
“age”: 22,
“gender”: “male”
}
اگرچه JSON از جاوا اسکریپت سرچشمه می‌گیرد اما دارای نحو یا سینتکسی شبیه به سینتکس لغوی شی در جاوا اسکریپت است. با این حال، این فرمت فراتر از جاوا اسکریپت بوده و با زبان‌های برنامه‌نویسی مختلفی سازگار است. در حالی که اشیاء جاوا اسکریپت و JSON شباهت‌هایی دارند اما به روش‌های متفاوتی با هم تفاوت دارند، موضوعی که بعداً در این آموزش به آن خواهیم پرداخت.
جیسون در اصل شامل جفت‌های کلید-مقدار است که در آن کلید رشته و مقدار آن می‌تواند عدد، رشته، بولی، آرایه، شی یا تهی باشد. قوانین کلیدی شامل الزام به قرار گرفتن کلیدها در دو بک‌تیک و استفاده از دو نقطه برای جدا کردن کلیدها و مقادیر است. همچنین چند جفت با کاما از هم جدا می‌شوند. مثالی اساسی از داده‌های JSON به شرح زیر است:
{
“name”: “Alex C”,
“age”: 2,
“city”: “Houston”
}
این ساختار امکان نمایش انواع مختلف اطلاعات را به شیوه‌ای استانداردشده می‌دهد.
سینتکس JSON در جاوا اسکریپت
{
“First_Name”: “value”,
“Last_Name”: “value”
}
همچنین هنگام مدیریت شی JSON در فایل.js یا.html، سینتکس زیر باید دنبال شود:
var varName = {
“First_Name”: “value”,
“Last_Name”: “value”
};
کاربرد جیسون در جاوا اسکریپت چیست؟
JSON به عنوان نوعی فرمت داده غالب برای تبادل داده بین سرورها و کلاینت‌ها عمل کرده که تبادل یکپارچه داده‌ها را تسهیل می‌کند. از طرفی دیگر ساختار ساده آن امکان تجزیه و استفاده آسان را فراهم کرده و دسترسی کارآمد و دست‌کاری اطلاعات متنی را تضمین می‌کند. استقلال زبان JSON ایجاد و استفاده از آن را در طیفی از زبان‌های برنامه‌نویسی امکان‌پذیر می‌سازد و بر تطبیق‌پذیری و کاربرد گسترده آن تأکید می‌کند. در کل از موارد استفاده از Json در جاوا اسکریپت می‌توان موارد زیر را نام برد:
- ایجاد و ذخیره‌سازی داده‌های به دست آمده از ورودی کاربر را تسهیل می‌کند.
- Json امکان انتقال یکپارچه داده‌ها را در بین سرورها و کلاینت‌ها در هر دو جهت سرور به کلاینت، کلاینت به سرور و سرور به سرور را امکان‌پذیر می‌کند.
- علاوه بر این، می‌توان از آن برای ساخت و اعتبارسنجی داده‌ها استفاده کرد و به تطبیق‌پذیری آن در کارهای مختلف مرتبط با داده کمک کرد.
داده‌های معتبر در کار با فایل json
داده‌های JSON معتبر می‌توانند دو فرمت مجزا داشته باشند:
- مجموعه جفت‌های کلید-مقدار محصور در یک بریس {…}.
{
“name”: “Alex C”,
“age”: 2,
“city”: “Houston”
}
- مجموعه رکوردهایی شامل لیستی مرتب از جفت‌های کلید-مقدار که با کاما (،) از هم جدا شده و درون یک جفت کروشه […] قرار گرفته است.
[
{
“name”: “Alex C”,
“age”: 2,
“city”: “Houston”
},
{
“name”: “John G”,
“age”: 40,
“city”: “Washington”
},
{
“name”: “Bala T”,
“age”: 22,
“city”: “Bangalore”
}
]
اگرچه فرمت JSON شباهت ساختاری با اشیاء و دارد اما آن‌ها موجودیت‌های مجزایی هستند. JSON در جاوا اسکریپت مستقل از زبان است و در زبان‌های برنامه‌نویسی مختلف مانند ، جاوا، PHP و غیره کاربرد پیدا می‌کند. اشتقاق ساختار JSON از اشیاء جاوا اسکریپت تنها ارتباط بین این دو موجودیت است.
داده‌های JSON
داده‌های JSON شامل جفت‌های کلید/مقدار، شبیه به ویژگی‌های اشیاء جاوا اسکریپت هستند. سینتکس آن همان‌طور که در بالا نیز به آن اشاره شد، شامل بک‌تیک‌های دوگانه است که هم کلیدها و هم مقادیر را در برمی‌گیرد و با دو نقطه از هم جدا می‌شوند. برای مثال:
“name”: “John”
ذکر این نکته ضروری است که JSON برای کلیدها، استفاده از بک‌تیک‌ها را الزامی می‌کند.
شی JSON در جاوا اسکریپت
شی JSON در داخل بریس‌های {} محصور شده است و چندین جفت کلید/مقدار را در خود جای می‌دهد. مثال زیر برای بیان این هدف است:
{ “name”: “John”, “age”: 22 }
آرایه JSON با براکت [] نشان داده می‌شود، مانند مثال زیر:
[ “apple”, “mango”, “banana”]
تبدیل json به آرایه در جاوا اسکریپت به راحتی امکان‌پذیر بوده و می‌توان در سناریوهای مختلی از آن بهره برد.
علاوه بر این، داده‌های JSON می‌توانند آرایه‌ها و اشیاء را ترکیب کنند، همان‌طور که در مثال‌های زیر نشان داده شده است:
[
{ “name”: “John”, “age”: 22 },
{ “name”: “Peter”, “age”: 20 },
{ “name”: “Mark”, “age”: 23 }
]
بر خلاف اشیاء در جاوا اسکریپت، داده‌های JSON نمی‌توانند توابعی را به‌عنوان مقادیر در بر گیرند.
نمونه ساختار JSON در زبان جاوا اسکریپت
{
“name”: “Aleix Melon”,
“id”: “E00245”,
“role”: [“Dev”, “DBA”],
“age”: 23,
“doj”: “11-12-2019”,
“married”: false,
“address”: {
“street”: “32, Laham St.”,
“city”: “Innsbruck”,
“country”: “Austria”
},
“referred-by”: “E0012”
}
تجزیه‌وتحلیل ویژگی‌ها در نمونه فایل Json بالا به صورت زیر است:
- name: نام کارمند که به صورت رشته نمایش داده می‌شود.
- id: نوعی شناسه منحصربه‌فرد برای کارمند است.
- role: نقش‌هایی که کارمند بازی می‌کند و در یک آرایه ذخیره می‌شود.
- age: سن فعلی کارمند که به صورت یک عدد نمایش داده می‌شود.
- doj: تاریخ پیوستن به شرکت، به عنوان رشته محصور شده در دو بک تیک.
- married: در قالب نوعی داده بولی نشان می‌دهد که آیا کارمند متأهل است یا خیر.
- address: نوعی شی نشان‌دهنده آدرس کارمند با جفت‌های کلید-مقدار.
- referred-by: شناسه ارجاع کارمند است.
برای گسترش این مفهوم می‌توان مثال فوق را این بار برای مجموعه‌ای از کارمندان، گسترش داد:
[
{
“name”: “Aleix Melon”,
“id”: “E00245”,
“role”: [“Dev”, “DBA”],
“age”: 23,
“doj”: “11-12-2019”,
“married”: false,
“address”: {
“street”: “32, Laham St.”,
“city”: “Innsbruck”,
“country”: “Austria”
},
“referred-by”: “E0012”
},
{
“name”: “Bob Washington”,
“id”: “E01245”,
“role”: [“HR”],
“age”: 43,
“doj”: “10-06-2010”,
“married”: true,
“address”: {
“street”: “45, Abraham Lane.”,
“city”: “Washington”,
“country”: “USA”
},
“referred-by”: null
}
]
دسترسی به داده‌های جیسون در جاوا اسکریپت
برای بازیابی اطلاعات از داده‌های JSON در جاوا اسکریپت، از علامت نقطه استفاده می‌شود. شی JSON زیر را به عنوان مثال در نظر بگیرید:
const data = {
“name”: “John”,
“age”: 22,
“hobby”: {
“reading”: true,
“gaming”: false,
“sport”: “football”
},
“class”: [“JavaScript”, “HTML”, “CSS”]
};
با استفاده از علامت نقطه، دسترسی به شکل زیر حاصل می‌شود:
console.log(data.name); // John
console.log(data.hobby); // { gaming: false, reading: true, sport: “football”}
console.log(data.hobby.sport); // football
console.log(data.class[1]); // HTML
console.log(data[“name”]); // John
هر دو روش هنگام کار با داده‌های JSON در جاوا اسکریپت انعطاف‌پذیری لازم را فراهم می‌کنند.
تمایز بین اشیا و JSON در زبان برنامه‌نویسی جاوا اسکریپت
تمایز بین اشیاء و جیسون در جاوا اسکریپت بسیار مهم است زیرا این دو نوع داد تفاوت‌های قابل‌توجهی از خود نشان می‌دهند که توضیحات زیر در این رابطه بسیار مهم است:
JSON:
- به کلیدهای جفت کلید/مقدار نیاز دارد که در بک‌تیک دوتایی محصور شوند.
- از گنجاندن توابع در ساختار خود پشتیبانی نمی‌کند.
- دارای سازگاری بین زبانی است که امکان ایجاد و استفاده توسط زبان‌های برنامه‌نویسی مختلف را فراهم می‌کند.
شی جاوا اسکریپت:
- اجازه می‌دهد تا کلیدهای جفت کلید/مقدار بدون نیاز بک‌تیک دوگانه استفاده شوند.
- اجازه می‌دهد تا توابع را به عنوان بخشی از ساختار آن درج کند.
- محدود به استفاده از زبان برنامه‌نویسی جاوا اسکریپت است.
درک این تمایزات برای استفاده مؤثر و قابلیت همکاری در حوزه توسعه وب ضروری است.
تبدیل داده‌های JSON به شی جاوا اسکریپت
// JSON object
const jsonData = ‘{ “name”: “John”, “age”: 22 }’;
// Conversion to JavaScript object
const obj = JSON.parse(jsonData);
// Accessing the data
console.log(obj.name); // John
تبدیل شی جاوا اسکریپت به فرمت JSON
برای تبدیل شی جاوا اسکریپت به فرمت JSON، تابع داخلی JSON.stringify مورد استفاده قرار می‌گیرد که مثال زیر نحوه استفاده از این تابع را بیان می‌کند:
// JavaScript object
const jsonData = { “name”: “John”, “age”: 22 };
// Conversion to JSON
const obj = JSON.stringify(jsonData);
// Accessing the data
console.log(obj); // “{“name”:”John”,”age”:22}”
دو نوع متد برای جیسون در جاوا اسکریپت وجود دارد که در اینجا توضیحی در مورد متدهای JSON در جاوا اسکریپت به همراه مثالی ساده آورده شده است:
- parse: رشته JSON را به شی جاوا اسکریپت تبدیل می‌کند.
- stringify: شی جیسون جاوا اسکریپت را به نمایش رشته JSON تبدیل می‌کند.
مثال:
خروج مثال فوق به صورت زیر است:
مدیریت خطا در کار با جیسون در جاوا اسکریپت
هنگام کار با JSON در جاوا اسکریپت، مواجه شدن با خطایی مانند Token unexpected u in JSON در طول فرآیند تجزیه، خطایی رایج و معمول است. این خطا نشان‌دهنده نوعی مشکل نحوی در داده‌های JSON است.
اگر با این خطا مواجه شدید، توصیه می‌شود صحت فرمت داده JSON خود را بررسی کنید. اغلب، نوعی اشتباه جزئی هم می‌تواند منجر به چنین خطاهایی شود. برای اطمینان از صحت JSON خود می‌توانید از JSON Linter استفاده کنید، ابزاری که سینتکس داده‌های JSON را تأیید و بررسی می‌کند. این ابزار به شما کمک خواهد کرد تا هر گونه مشکل در ساختار JSON را شناسایی و اصلاح کنید و از تجزیه و پردازش درست داده‌ها حاصل نمایید.
جمع بندی
چگونه میتوانم در جاوا اسکریپت حرفه ای تر شویم؟
با خواندن مقالات مختلف احتمالا بتوانید تا حدی به بخش‌های مختلف جاوا اسکریپت مسلط شوید اما قطعا بی‌برنامه بودن و اصولی نبودن مسیر یادگیری باعث می‌شود شما نسبت به زبان برنامه نویسی جاوا اسکریپت دلسرد شوید یا اینکه آن را بصورت کامل یاد نگیرید؛ اما نگران این موضوع نباشید، تیم سبزلرن برای شما را به‌صورت کاملا رایگان قرار داده تا بتوانید به‌صورت اصولی و حرفه‌ای در زبان جاوا اسکریپت متخصص شوید. اما این همه ماجرا نیست!! این دوره علاوه بر رایگان بودن آن، دارای پشتیبانی انلاین نیز هست و هرکجا به هر مشکلی برخوردید، افراد متخصص در این زبان آماده پاسخگویی به اشکالات و سوالات شما هستند، چی بهتر از این؟ پس فرصت را غنیمت بشمرید و همین الان در این دوره شرکت کنید و بصورت تخصصی یادگیری خودتان را شروع کنید.