از آن جا که JSON از زبان برنامه نویسی جاوا اسکریپت گرفته شده است، یک انتخاب طبیعی برای استفاده به عنوان یک فرمت داده در جاوا اسکریپت است. JSON، شکل اختصاری JavaScript Object Notation و به معنی نشانه گذاری شیء جاوا اسکریپت است، و معمولا مانند نام “جیسون” تلفظ می شود.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
برای شروع، مواردی که ممکن است از JSON در برنامه های جاوا اسکریپت استفاده شود را در نظر می گیریم، برخی از موارد استفاده عمومی JSON عبارتند از:
- ذخیره داده ها
- ایجاد ساختار داده از ورودی کاربر
- انتقال داده ها از سرور به مشتری، مشتری به سرور و سرور به سرور
- پیکربندی و تأیید اطلاعات
در این آموزش مقدمه ای برای کار با JSON در JavaScript ارائه داده می شود. برای استفاده بیشتر از این مقاله، بهتر است که با زبان برنامه نویسی جاوا اسکریپت آشنایی داشته باشید.
فرمت JSON
فرمت JSON از سینتکس شیء JavaScript استخراج شده است، اما کاملا مبتنی بر متن است. و یک فرمت داده ی key-value است که به طور معمول در آکولاد ارائه می شود.
آموزش پیشنهادی برای شما : آموزش جاوا اسکریپت از مقدماتی تا پیشرفته
هنگامی که شما با JSON کار می کنید، احتمالا اشیا JSON را در یک فایل .json خواهید دید، اما این اشیاء می توانند به عنوان شیء یا رشته ی JSON در متن برنامه وجود داشته باشند.
یک فایل .json به صورت زیر است:
|
1 2 3 4 5 6 7 8 9 10 11 |
sammy.json { "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
اما اگر، یک شیء JSON را در یک فایل .js یا .html داشته باشید، احتمالا آن را به صورت یک متغیر مشاهده خواهید کرد:
|
1 2 3 4 5 6 7 8 9 |
var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
علاوه بر این، ممکن است در متنِ اسکریپت یا فایل برنامه ی جاوا اسکریپت، JSON را به جای یک شی به عنوان یک رشته ببینید. در این مورد، همچنین ممکن است همه را در یک خط ببینید:
|
1 |
var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'; |
تبدیل اشیاء JSON به رشته ها می تواند برای انتقال داده ها به شیوه ای سریع مفید باشد.
مقایسه با جاوا اسکریپت
لازم به ذکر است که JSON برای هر زبان برنامه نویسی مورد استفاده قرار می گیرد، در حالی که اشیاء جاوا اسکریپت فقط می توانند به طور مستقیم از طریق زبان برنامه نویسی جاوا اسکریپت کار کنند.
از لحاظ سینتکس، اشیاء جاوا اسکریپت شبیه JSON هستند، اما کلید ها در اشیاء جاوا اسکریپت، رشته هایی در نقل قول نیستند. همچنین، اشیاء جاوا اسکریپت از لحاظ نوع انتقال، کمتر به مقادیر محدود است، بنابراین می توانند توابع را به عنوان مقادیر استفاده کنند.
بیایید به مثالی از یک شیء جاوا اسکریپت نگاهی کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; } }; |
این مثال به عنوان یک شی JSON بسیار آشنا به نظر می آید، اما نقل قولی برای هیچ کدام از کلیدهای (first_name، last_name، online، or full_name) وجود ندارد و در آخرین خط نیز، یک function value وجود دارد.
اگر بخواهیم به داده ها در شیء جاوا اسکریپت بالا دسترسی داشته باشیم، می توانیم از علامت نقطه برای فراخوانی user.first_name استفاده کنیم؛ و یک رشته دریافت کنیم، اما اگر بخواهیم به full_name دسترسی داشته باشیم، چون یک تابع است باید user.full_name () را فراخوانی کنیم.
اشیاء جاوا اسکریپت فقط در زبان جاوا اسکریپت وجود دارند، بنابراین هنگام کار با داده هایی که باید توسط زبان های مختلف به آن ها دسترسی داشته باشید، بهتر است JSON را انتخاب کنید.
دسترسی به داده های JSON
داده های JSON به طور معمول در جاوا اسکریپت از طریق نماد نقطه در دسترس قرار می گیرند. برای درک چگونگی کار، یک شیء JSON ، sammy، را در نظر می گیریم:
|
1 2 3 4 5 6 7 8 9 |
var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
برای دسترسی به هر یک از مقادیر، از نماد نقطه استفاده می کنیم که به صورت زیر است:
|
1 2 3 4 5 |
sammy.first_name sammy.last_name sammy.online |
متغیر sammy در اول می آید، پس از آن یک نقطه، و سپس کلیدی برای دسترسی.
برای ایجاد یک هشدار جاوا اسکریپت که مقدار مربوط به کلید first_name در یک پاپ آپ را به ما نشان می دهد، تابع alert() جاوا اسکریپت را فراخوانی می کنیم:
|
1 2 3 4 5 |
alert(sammy.first_name); Output Sammy |
در این جا از شیء JSON، sammy، مقدار مربوط به کلید first_name را با موفقیت فراخوانی کردیم.
برای دسترسی به داده ها از JSON همچنین می توانیم از سینتکس براکت استفاده کنیم. برای انجام این کار، باید کلید را در نقل قول های دوگانه درون براکت قرار می دهیم. برای متغیر Sammy در بالا، با استفاده سینتکس براکت در تابع alert()، خواهیم داشت:
|
1 2 3 4 5 |
alert(sammy["online"]); Output true |
هنگامی که با عناصر آرایه های تو در تو کار می کنیم، باید شماره آیتم های آرایه را بنویسیم. JSON زیر را در نظر بگیریم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
var user_profile = { "username" : "SammyShark", "social_media" : [ { "description" : "twitter", "link" : "https://twitter.com/digitalocean" }, { "description" : "facebook", "link" : "https://www.facebook.com/DigitalOceanCloudHosting" }, { "description" : "github", "link" : "https://github.com/digitalocean" } ] } |
برای دسترسی به هر رشته، می توان آن آیتمِ آرایه را فراخوانی کرد:
|
1 2 3 4 5 |
alert(user_profile.social_media[1].description); Output facebook |
توجه داشته باشید که برای هر عنصر، از یک نقطه ی اضافی استفاده می کنیم.
با استفاده از نشانه ی نقطه یا سینتکس براکت، می توان به اطلاعات موجود در فرمت JSON دسترسی پیدا کرد.
توابع برای کار با JSON
در این بخش به دو روش parsing JSON و stringifying JSON نگاه خواهیم کرد. تبدیل JSON از شی به رشته و بالعکس برای انتقال و ذخیره داده ها مفید است.
()JSON.stringify
تابع JSON.stringify () یک شی را به یک رشته ی JSON تبدیل می کند.
رشته ها برای انتقال داده ها از یک مشتری به یک سرور از طریق ذخیره یا انتقال اطلاعات مفید هستند. به عنوان مثال، ممکن است تنظیمات کاربر را در سمت مشتری جمع آوری کرده و سپس آن ها را به یک سرور ارسال کنید. بعدا می توانید اطلاعات را با روش JSON.parse () بخوانید و در صورت نیاز با اطلاعات کار کنید.
در این جا به یک شی JSON که به متغیر obj اختصاص داده ایم نگاه می کنیم و سپس آن را با استفاده از JSON.stringify () با انتقال obj به تابع، تبدیل می کنیم. می توان این رشته را به متغیر s اختصاص داد:
|
1 2 3 |
var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"} var s = JSON.stringify(obj) |
اکنون، اگر با S کار کنیم، JSON را به جای یک شی، به عنوان یک رشته در اختیار ما قرار می دهد:
|
1 |
'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}' |
تابع JSON.stringify () به ما اجازه می دهد اشیاء را به رشته ها تبدیل کنیم. برای انجام این کار، به عملکرد JSON.parse () نگاهی خواهیم داشت.
()JSON.parse
رشته ها برای انتقال مفید هستند، اما برای تبدیل دوباره ی آن ها به شیء JSON در مشتری و یا سمت سرور، در حالی که می توانید با استفاده از تابع eval ()، متن را به یک شیء تبدیل کنید، این کار خیلی امن نیست، بنابراین در عوض، از عملکرد JSON.parse () استفاده می کنیم.
برای تبدیل مثال بخش بالا، رشته s را به تابع منتقل می کنیم و آن را به یک متغیر جدید اختصاص می دهیم:
|
1 |
var o = JSON.parse(s) |
سپس، با شیء o کار می کنیم که با شیء obj منطبق است.
برای نگاه عمیق تر، نمونه ای از JSON.parse را درون یک فایل HTML بررسی می کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <body> <p id="user"></p> <script> var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'; var obj = JSON.parse(s); document.getElementById("user").innerHTML = "Name: " + obj.first_name + " " + obj.last_name + "<br>" + "Location: " + obj.location; </script> </body> </html> Output Name: Sammy Shark Location: Ocean |
در متن فایل HTML، می توانیم ببینیم که چگونه رشته ی JSON ،s ، به یک شیء تبدیل می شود که در رندر نهایی صفحه با دسترسی به JSON از طریق نماد نقطه قابل بازیابی است.
JSON.parse یک تابع امن برای تجزیه ی رشته های JSON و تبدیل آن ها را به اشیا است.
