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

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

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

JSON در جاوا اسکریپت چیست؟

علامت‌گذاری شی جاوا اسکریپت که به اختصار JSON نامیده می‌شود، به عنوان نوعی قالب داده مبتنی بر متن برای ذخیره و انتقال اطلاعات استفاده می‌شود. جیسون در جاوا اسکریپت از نوعی ساختار جفت کلید/مقدار استفاده می‌کند که مثال زیر بیانگر این هدف است:

{
    "name": "John",
    "age": 22,
    "gender": "male"
}

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

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

{
    "name": "Alex C",
    "age": 2,
    "city": "Houston"
}

این ساختار امکان نمایش انواع مختلف اطلاعات را به شیوه‌ای استانداردشده می‌دهد.

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

هنگامی که با فایل json در Javascript سروکار داشته باشیم باید از سینتکس زیر پیروی کنیم:

{ 
    "First_Name": "value", 
    "Last_Name": "value" 
}

همچنین هنگام مدیریت شی JSON در فایل.js یا.html، سینتکس زیر باید دنبال شود:

var varName = { 
    "First_Name": "value", 
    "Last_Name": "value" 
};

سازگاری در استفاده از این قالب‌های ساختاریافته، نمایش و تجزیه مناسب داده‌ها را در فایل‌های json و فایل‌های JavaScript/HTML تضمین می‌کند.

کاربرد جیسون در جاوا اسکریپت چیست؟

JSON به عنوان نوعی فرمت داده غالب برای تبادل داده بین سرورها و کلاینت‌ها عمل کرده که تبادل یکپارچه داده‌ها را تسهیل می‌کند. از طرفی دیگر ساختار ساده آن امکان تجزیه و استفاده آسان را فراهم کرده و دسترسی کارآمد و دست‌کاری اطلاعات متنی را تضمین می‌کند. استقلال زبان JSON ایجاد و استفاده از آن را در طیفی از زبان‌های برنامه‌نویسی امکان‌پذیر می‌سازد و بر تطبیق‌پذیری و کاربرد گسترده آن تأکید می‌کند. در کل از موارد استفاده از Json در جاوا اسکریپت می‌توان موارد زیر را نام برد:

• ایجاد و ذخیره‌سازی داده‌های به دست آمده از ورودی کاربر را تسهیل می‌کند.
• Json امکان انتقال یکپارچه داده‌ها را در بین سرورها و کلاینت‌ها در هر دو جهت سرور به کلاینت، کلاینت به سرور و سرور به سرور را امکان‌پذیر می‌کند.
• علاوه بر این، می‌توان از آن برای ساخت و اعتبارسنجی داده‌ها استفاده کرد و به تطبیق‌پذیری آن در کارهای مختلف مرتبط با داده کمک کرد.

داده‌های معتبر در کار با فایل json

داده‌های JSON معتبر می‌توانند دو فرمت مجزا داشته باشند:

1. مجموعه جفت‌های کلید-مقدار محصور در یک بریس {…}.

{
    "name": "Alex C",
    "age": 2,
    "city": "Houston"
}

2. مجموعه رکوردهایی شامل لیستی مرتب از جفت‌های کلید-مقدار که با کاما (،) از هم جدا شده و درون یک جفت کروشه […] قرار گرفته است.

[
    {
        "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 در Javascript

آرایه JSON با براکت [] نشان داده می‌شود، مانند مثال زیر:

[ "apple", "mango", "banana"]

تبدیل json به آرایه در جاوا اسکریپت به راحتی امکان‌پذیر بوده و می‌توان در سناریوهای‌ مختلی از آن بهره برد.

علاوه بر این، داده‌های JSON می‌توانند آرایه‌ها و اشیاء را ترکیب کنند، همان‌طور که در مثال‌های زیر نشان داده شده است:

[
    { "name": "John", "age": 22 },
    { "name": "Peter", "age": 20 },
    { "name": "Mark", "age": 23 }
]

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

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

داده‌های JSON که اطلاعات ساختاریافته را نشان می‌دهند، می‌توانند در فایل‌هایی با پسوند json. ذخیره شوند. در مثال زیر فایل staff.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

سینتکس فوق شامل ترکیب نام متغیر با کلید مورد نظر با استفاده از یک نقطه، مانند variableName.key است. متناوباً، همان‌طور که در اینجا نشان داده شده است، می‌توان از دستور «[]» نیز برای دسترسی استفاده کرد:

console.log(data["name"]); // John

هر دو روش هنگام کار با داده‌های JSON در جاوا اسکریپت انعطاف‌پذیری لازم را فراهم می‌کنند.

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

تمایز بین اشیاء و جیسون در جاوا اسکریپت بسیار مهم است زیرا این دو نوع داد تفاوت‌های قابل‌توجهی از خود نشان می‌دهند که توضیحات زیر در این رابطه بسیار مهم است:

JSON:

• به کلیدهای جفت کلید/مقدار نیاز دارد که در بک‌تیک دوتایی محصور شوند.
• از گنجاندن توابع در ساختار خود پشتیبانی نمی‌کند.
• دارای سازگاری بین زبانی است که امکان ایجاد و استفاده توسط زبان‌های برنامه‌نویسی مختلف را فراهم می‌کند.

شی جاوا اسکریپت:

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

درک این تمایزات برای استفاده مؤثر و قابلیت همکاری در حوزه توسعه وب ضروری است.

تبدیل داده‌های JSON به شی جاوا اسکریپت

برای تبدیل داده‌های JSON به شی جاوا اسکریپت، تابع داخلی JSON.parse به کار گرفته می‌شود که مثال زیر برای بیان این هدف است:

// 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.parse برای تجزیه داده‌های با فرمت JSON ذخیره‌شده در متغیر «jsonData» استفاده می‌کند که در نتیجه یک شی جاوا اسکریپت متناظر با نام «obj» ایجاد می‌شود. متعاقباً، دسترسی به خصوصیات فردی شیء، مانند name، با استفاده از نماد نقطه ساده خواهد شد.

تبدیل شی جاوا اسکریپت به فرمت 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.stringify برای تبدیل شی جاوا اسکریپت که با متغیر «jsonData» نشان داده شده است، به معادل JSON آن که در متغیر «obj» ذخیره‌شده است، استفاده می‌شود. در صورت نیاز می‌توان به داده‌های فرمت JSON دسترسی پیدا کرده و از آن‌ها استفاده کرد.

متدهای JSON در Javascript

دو نوع متد برای جیسون در جاوا اسکریپت وجود دارد که در اینجا توضیحی در مورد متدهای JSON در جاوا اسکریپت به همراه مثالی ساده آورده شده است:

• parse: رشته JSON را به شی جاوا اسکریپت تبدیل می‌کند.
• stringify: شی جیسون جاوا اسکریپت را به نمایش رشته JSON تبدیل می‌کند.

مثال:

<script> 
    // Illustrating JSON.parse() method 
    var jsonString = '{"Name": "Krishna", "Email": "XYZ", "CN": "12345"}'; 
    var jsonObject = JSON.parse(jsonString); 
    document.write("Converting a string to JSON format using the parse() method<br>"); 
    document.write(jsonObject.Email); // Expected output: XYZ 

    // Illustrating JSON.stringify() method 
    var jsonObject = {Name: "Krishna", Email: "XYZ", CN: 12345}; 
    var jsonString = JSON.stringify(jsonObject); 
    document.write("<br>Converting an object to JSON format using the stringify() method<br>"); 
    document.write(jsonString); // Expected output: {"Name": "Krishna", "Email": "XYZ", "CN": 12345} 
</script>

خروج مثال فوق به صورت زیر است:

مثال فوق در اصل استفاده عملی از متدهای JSON.parse و JSON.stringify را برای تبدیل بین رشته‌های JSON و اشیاء جاوا اسکریپت نشان می‌دهد.

مدیریت خطا در کار با جیسون در جاوا اسکریپت

هنگام کار با JSON در جاوا اسکریپت، مواجه شدن با خطایی مانند Token unexpected u in JSON در طول فرآیند تجزیه، خطایی رایج و معمول است. این خطا نشان‌دهنده نوعی مشکل نحوی در داده‌های JSON است.

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

جمع بندی

JSON در جاوا اسکریپت نوعی فرمت متداول برای تبادل داده است. با استفاده از JSON.parse، می‌توان داده‌های جیسون را به شیء جاوا اسکریپتی تبدیل کرده و با JSON.stringify، اطلاعات را به فرمت جیسون تبدیل کرد. جیسون در اصل ساده‌ترین راه برای ارتباط میان سرور و مرورگر یا ذخیره‌سازی داده‌هاست. در مطلب فوق از مجله سبزلرن، اطلاعات کامل و مطلوبی از جیسون در جاوا اسکریپت به همراه مثال‌های کاملاً عملی ارائه شد و در کنار آن موضوعات و مفاهیم مرتبط با جیسون نیز بیان شدند. به امید اینکه مطلب فوق برای کاربران عزیز مفید بوده باشد.

چگونه میتوانم در جاوا اسکریپت حرفه ای تر شویم؟

با خواندن مقالات مختلف احتمالا بتوانید تا حدی به بخش‌های مختلف جاوا اسکریپت مسلط شوید اما قطعا بی‌برنامه بودن و اصولی نبودن مسیر یادگیری باعث می‌شود شما نسبت به زبان برنامه نویسی جاوا اسکریپت دلسرد شوید یا اینکه آن را بصورت کامل یاد نگیرید؛ اما نگران این موضوع نباشید، تیم سبزلرن برای شما دوره آموزش صفر تا صد جاوا اسکریپت را به‌صورت کاملا رایگان قرار داده تا بتوانید به‌صورت اصولی و حرفه‌ای در زبان جاوا اسکریپت متخصص شوید. اما این همه ماجرا نیست!! این دوره علاوه بر رایگان بودن آن، دارای پشتیبانی انلاین نیز هست و هرکجا به هر مشکلی برخوردید، افراد متخصص در این زبان آماده پاسخگویی به اشکالات و سوالات شما هستند، چی بهتر از این؟ پس فرصت را غنیمت بشمرید و همین الان در این دوره شرکت کنید و بصورت تخصصی یادگیری خودتان را شروع کنید.