آموزش جاوا اسکریپت مبتدی : کار با JSON
نشانهگذاری شیء جاوا اسکریپت (JSON) یک قالب استاندارد مبتنی بر متن برای نمایش دادههای ساختاریافته بر اساس سینتکس شیء جاوا اسکریپت است. این قالب معمولاً برای انتقال دادهها در برنامههای وب استفاده میشود (مثلاً ارسال مقداری داده از سرور به کلاینت، بنابراین میتوان آن را در یک صفحه وب نمایش داد یا برعکس). شما اغلب با آن مواجه خواهید شد، بنابراین در این مقاله، هر آنچه را که برای کار با JSON با استفاده از جاوا اسکریپت نیاز دارید، از جمله تجزیه JSON برای دسترسی به دادههای درون آن و ایجاد JSON، در اختیار شما قرار میدهیم.
JSON یک فرمت داده مبتنی بر متن است که از سینتکس شیء جاوا اسکریپت پیروی میکند. این فرمت، دادههای ساختاریافته را به صورت یک رشته نمایش میدهد که زمانی که میخواهید دادهها را از طریق شبکه منتقل کنید، مفید است. اگرچه شباهت زیادی به سینتکس تحتاللفظی شیء جاوا اسکریپت دارد، اما میتواند مستقل از جاوا اسکریپت مورد استفاده قرار گیرد. بسیاری از محیطهای برنامهنویسی قابلیت خواندن (تجزیه) و تولید JSON را دارند. در جاوا اسکریپت، روشهای تجزیه و تولید JSON توسط شیء JSON ارائه میشوند.
تبدیل یک رشته به یک شیء بومی، deserialization نامیده میشود، در حالی که تبدیل یک شیء بومی به یک رشته به طوری که بتوان آن را در سراسر شبکه منتقل کرد، serialization نامیده میشود.
یک رشته JSON میتواند در فایل مخصوص به خود ذخیره شود، که اساساً فقط یک فایل متنی با پسوند و نوع MIME است.
همانطور که در بالا توضیح داده شد، JSON رشتهای است که قالب آن بسیار شبیه به قالب شیء تحتاللفظی جاوااسکریپت است. در ادامه یک رشته JSON معتبر که نشاندهنده یک شیء است، آمده است. توجه داشته باشید که این رشته همچنین یک شیء تحتاللفظی معتبر جاوااسکریپت است - فقط با محدودیتهای نحوی بیشتر.
اگر این JSON را به عنوان یک رشته در برنامه جاوا اسکریپت خود بارگذاری کنید، میتوانید آن را به یک شیء معمولی تجزیه کنید و سپس با استفاده از همان نمادگذاری نقطه/براکت که در مقاله اصول شیء جاوا اسکریپت بررسی کردیم، به دادههای داخل آن دسترسی پیدا کنید. برای مثال:
ابتدا، ما متغیری به نام superHeroes داریم.
در داخل آن، میخواهیم به ویژگی members دسترسی پیدا کنیم، بنابراین از استفاده میکنیم.
members شامل آرایهای است که توسط اشیاء پر شده است. ما میخواهیم به شیء دوم درون آرایه دسترسی پیدا کنیم، بنابراین از استفاده میکنیم.
در داخل این شیء، میخواهیم به ویژگی powers دسترسی پیدا کنیم، بنابراین از استفاده میکنیم.
در داخل ویژگی powers آرایهای وجود دارد که شامل ابرقدرتهای قهرمان انتخاب شده است. ما سومی را میخواهیم، بنابراین از استفاده میکنیم.
نکته کلیدی این است که واقعاً هیچ چیز خاصی در مورد کار با JSON وجود ندارد. پس از اینکه آن را به یک شیء جاوا اسکریپت تبدیل کردید، درست مانند زمانی که با یک شیء با همان سینتکس تحتاللفظی شیء اعلام شده کار میکنید.
در بالا اشاره کردیم که متن JSON اساساً مانند یک شیء جاوا اسکریپت درون یک رشته به نظر میرسد. ما همچنین میتوانیم آرایهها را به/از JSON تبدیل کنیم. مثال زیر JSON کاملاً معتبری است:
شما باید برای دسترسی به آیتمهای آرایه (در نسخه تجزیهشدهاش) با شروع از یک اندیس آرایه، مثلاً به آیتمهای آرایه دسترسی داشته باشید.
JSON همچنین میتواند شامل یک نوع داده اولیه باشد. برای مثال، 29، یا true همگی JSON معتبری هستند.
همانطور که قبلاً ذکر شد، هر JSON یک لیترال معتبر جاوا اسکریپت (شیء، آرایه، عدد و غیره) است. با این حال، عکس این قضیه صادق نیست - همه لیترالهای شیء جاوا اسکریپت، JSON معتبر نیستند.
JSON فقط میتواند شامل انواع داده سریالیپذیر باشد. این بدان معناست که:
برای مقادیر اولیه، JSON میتواند شامل لیترالهای رشتهای، لیترالهای عددی، true، false و null باشد. نکته قابل توجه این است که نمیتواند شامل undefined، NaN یا Infinity باشد.
برای مقادیر غیر اولیه، JSON میتواند شامل لیترالهای شیء و آرایهها باشد، اما نمیتواند شامل توابع یا هر نوع شیء دیگری مانند Date، Set و Map باشد. اشیاء و آرایههای داخل JSON باید شامل انواع داده معتبر JSON نیز باشند.
رشتهها باید داخل دابل کوتیشن قرار گیرند، نه تک کوتیشن.
اعداد باید به صورت اعشاری نوشته شوند.
هر ویژگی یک شیء باید به شکل
باشد. نام ویژگیها باید رشتهای باشد که داخل دابل کوتیشن قرار گرفته است. استفاده از سینتکسهای خاص جاوا اسکریپت، مانند متدها، مجاز نیست زیرا متدها تابع هستند و توابع از انواع داده معتبر JSON نیستند.
اشیاء و آرایهها نمیتوانند شامل کاما باشند.
کامنتها در JSON مجاز نیستند.
حتی یک کاما یا دونقطه اشتباه میتواند یک فایل JSON را نامعتبر کند و باعث خرابی آن شود. شما باید مراقب باشید که هر دادهای را که میخواهید استفاده کنید، اعتبارسنجی کنید (اگرچه JSON تولید شده توسط کامپیوتر، تا زمانی که برنامه مولد به درستی کار کند، احتمال کمتری دارد که شامل خطا باشد). میتوانید JSON را با استفاده از برنامههایی مانند یا اعتبارسنجی کنید.
بنابراین، بیایید با یک مثال نشان دهیم که چگونه میتوانیم از برخی دادههای قالببندی شده JSON در یک وبسایت استفاده کنیم.
برای شروع، کپیهایی از فایلهای خود در محل ایجاد کنید. فایل شامل مقداری CSS ساده برای استایلدهی به صفحه ما و مقداری HTML بدنه بسیار ساده به علاوه یک عنصر برای قرار دادن کد جاوا اسکریپتی است که در این تمرین خواهیم نوشت:
کد json بالا را از گیتهاب قرار است فرابخوانیم.
ما قصد داریم JSON را در اسکریپت خود بارگذاری کنیم و از دستکاریهای DOM به شیوهای هوشمندانه برای نمایش آن استفاده کنیم، مانند این:
تابع سطح بالا به این شکل است:
تابع سطح بالا برای دریافت JSON، از یک API به نام Fetch استفاده میکنیم. این API به ما امکان میدهد تا درخواستهای شبکهای برای بازیابی منابع از یک سرور از طریق جاوا اسکریپت (مثلاً تصاویر، متن، JSON، حتی قطعه کدهای HTML) ارسال کنیم، به این معنی که میتوانیم بخشهای کوچکی از محتوا را بدون نیاز به بارگذاری مجدد کل صفحه بهروزرسانی کنیم.
در تابع ما، چهار خط اول از API Fetch برای دریافت JSON از سرور استفاده میکنند:
ما متغیر requestURL را برای ذخیره URL آدرس فایل تعریف میکنیم
ما از URL برای مقداردهی اولیه یک شیء Request جدید استفاده میکنیم.
ما درخواست شبکه را با استفاده از تابع انجام میدهیم و این یک شیء Response برمیگرداند
ما پاسخ را به صورت JSON با استفاده از تابع از شیء Response بازیابی میکنیم.
ناهمزمان است. میتوانید در ماژول جاوا اسکریپت ناهمزمان ما، جزئیات بیشتری در مورد توابع ناهمزمان بیاموزید، اما فعلاً فقط میگوییم که باید کلمه کلیدی را قبل از نام تابعی که از API واکشی استفاده میکند، اضافه کنیم و کلمه کلیدی را قبل از فراخوانی هر تابع ناهمزمان اضافه کنیم.
پس از همه اینها، متغیر superHeroes شامل شیء جاوا اسکریپت مبتنی بر JSON خواهد بود. سپس آن شیء را به دو فراخوانی تابع ارسال میکنیم - اولی را با دادههای صحیح پر میکند، در حالی که دومی یک کارت اطلاعات برای هر قهرمان در تیم ایجاد میکند و آن را در قرار میدهد. به این شکل است:
حالا که دادههای JSON را بازیابی و به یک شیء جاوا اسکریپت تبدیل کردهایم، بیایید با نوشتن دو تابعی که در بالا به آنها اشاره کردیم، از آن استفاده کنیم. اول از همه، تعریف تابع زیر را زیر کد قبلی اضافه کنید:
در اینجا ابتدا یک عنصر h1 با استفاده از ایجاد میکنیم، textContent آن را برابر با ویژگی squadName شیء قرار میدهیم، سپس آن را با استفاده از به سربرگ اضافه میکنیم. سپس عملیات بسیار مشابهی را با یک پاراگراف انجام میدهیم: آن را ایجاد میکنیم، محتوای متن آن را تنظیم میکنیم و آن را به سربرگ اضافه میکنیم. تنها تفاوت این است که متن آن روی یک template literal تنظیم میشود که شامل ویژگیهای homeTown و formed شیء است.
ایجاد کارتهای اطلاعات قهرمانان
سپس، تابع زیر را در پایین کد اضافه کنید که کارتهای ابرقهرمانان را ایجاد و نمایش میدهد:
برای شروع، ویژگی members شیء جاوا اسکریپت را در یک متغیر جدید ذخیره میکنیم. این آرایه شامل چندین شیء است که حاوی اطلاعات هر قهرمان هستند.
در مرحله بعد، از یک حلقه برای پیمایش هر شیء در آرایه استفاده میکنیم. برای هر یک از آنها:
چندین عنصر جدید ایجاد میکنیم: یک ، یک ، سه و یک .
را طوری تنظیم میکنیم که حاوی نام قهرمان فعلی باشد.
سه پاراگراف را با secretIdentity، age و یک خط با عنوان "Superpowers:" برای معرفی اطلاعات موجود در لیست پر کنید.
ویژگی powers را در یک ثابت جدید دیگر به نام superPowers ذخیره کنید - این شامل آرایهای است که قدرتهای قهرمان فعلی را فهرست میکند.
از یک حلقه دیگر برای پیمایش قدرتهای قهرمان فعلی استفاده کنید - برای هر یک از آنها یک عنصر ایجاد میکنیم، قدرت را درون آن قرار میدهیم، سپس listItem را با استفاده از درون عنصر (myList) قرار میدهیم. آخرین کاری که انجام میدهیم این است که و را داخل (myArticle) اضافه میکنیم، سپس را داخل اضافه میکنیم. ترتیب اضافه شدن موارد مهم است، زیرا این ترتیب نمایش آنها در HTML است.
در نهایت، باید تابع سطح بالای خود را فراخوانی کنیم:
مثال بالا از نظر دسترسی به شیء جاوا اسکریپت ساده بود، زیرا ما پاسخ شبکه را مستقیماً با استفاده از به یک شیء جاوا اسکریپت تبدیل کردیم.
اما گاهی اوقات ما آنقدر خوش شانس نیستیم - گاهی اوقات یک رشته JSON خام دریافت میکنیم و باید خودمان آن را به یک شیء تبدیل کنیم. و وقتی میخواهیم یک شیء جاوا اسکریپت را از طریق شبکه ارسال کنیم، باید قبل از ارسال آن را به JSON (یک رشته) تبدیل کنیم. خوشبختانه، این دو مشکل در توسعه وب آنقدر رایج هستند که یک شیء JSON داخلی در مرورگرها موجود است که شامل دو روش زیر است:
: یک رشته JSON را به عنوان پارامتر میپذیرد و شیء جاوا اسکریپت مربوطه را برمیگرداند.
: یک شیء را به عنوان پارامتر میپذیرد و رشته JSON معادل آن را برمیگرداند.
میتوانید اولین مورد را به شکلی دیگر اینجا مشاهده کنید - این دقیقاً همان کاری را انجام میدهد که مثالی که قبلاً ساختیم انجام میدهد، با این تفاوت که:
ما با فراخوانی متد پاسخ، پاسخ را به صورت متن به جای JSON بازیابی میکنیم. سپس از برای تبدیل متن به یک شیء جاوا اسکریپت استفاده میکنیم.
قطعه کلیدی کد در اینجا آمده است:
همانطور که ممکن است حدس بزنید، به روش معکوس عمل میکند. سعی کنید خطوط زیر را یکی یکی در کنسول جاوا اسکریپت مرورگر خود وارد کنید تا عملکرد آن را ببینید:
در اینجا ما یک شیء جاوا اسکریپت ایجاد میکنیم، بررسی میکنیم که چه چیزی در آن وجود دارد، آن را با استفاده از به یک رشته JSON تبدیل میکنیم - مقدار بازگشتی را در یک متغیر جدید ذخیره میکنیم - سپس دوباره آن را بررسی میکنیم.
