آشنایی با کدهای JSON و ساختار آن‌ها

Avatar
نویسنده: علیرضا برزودی
دوشنبه 28 شهریور 1401
مطالعه: ۹ دقیقه ۰ نظر ۲۵۲۱ بازدید

Json مخفف عبارت JavaScript Object Notation و فرمتی برای به‌اشتراک‌گذاشتن داده‌هاست. همان‌طور‌که از نام آن پیداست، Json از زبان برنامه‌نویسی جاوا‌اسکریپت برگرفته شده است؛ اما برای دیگر زبان‌ها از‌جمله پایتون، Ruby ،PHP و جاوا هم در‌دسترس قرار دارد. در این مقاله از آموزش برنامه نویسی، قصد داریم شما را با کدهای JSON و ساختار آن‌ها آشنا کنیم.

JSON چیست؟

همان‌طور‌که گفتیم، JSON مخفف عبارت JavaScript Object Notation به‌معنای «نمادگذاری اشیاء در جاوا‌اسکریپت» است. شما می‌توانید در این قالب داده‌ها را به‌اشتراک بگذارید. JSON زمانی که مستقل است، از پسوند json. استفاده می‌کند؛ اما زمانی که در قالب فایل دیگری مانند html تعریف شود، می‌تواند در نقل‌قول‌ها به‌صورت رشته‌کد JSON ظاهر شود. انتقال این فرمت بین وب‌سرور و کلاینت یا مرورگر آسان است. JSON بسیار خوانا و سبک است و به‌عنوان بهترین جایگزین برای XML شناخته می‌شود و به قالب‌بندی بسیار کمتری نیاز دارد.

استفاد از فایل json در جاوا اسکریپت

آشنایی با مفهوم و ساختار json

ساختار کدهای JSON

زمانی که با JSON کار می‌کنید، احتمالاً آبجکت‌های JSON را در فایل json. می‎بینید؛ اما آن‌ها می‌توانند به‌عنوان آبجکت یا رشته JSON در متن برنامه هم وجود داشته باشند. هر آبجکت JSON تقریباً چیزی شبیه زیر است:

{
  "first_name" : "Sammy",
  "last_name" : "Shark",
  "location" : "Ocean",
  "online" : true,
  "followers" : 987 
}

این مثال نسبتاً کوتاه از جیسون است و JSON می‌تواند خطوط زیادی داشته باشد. داده‌ها در جفت‌هایی به‌شکل نام/مقدار (Name/Value) قرار می‌گیرند و با علامت کاما (Comma) از یکدیگر جدا می‌شوند.

علامت‌های { } نگه‌دارنده آبجکت‌ها و [ ] نیز نگه‌دارنده آرایه‌ها خواهند بود. بیشتر داده‌های استفاده‌شده در JSON در یک آبجکت JSON کپسوله می‌شوند. جفت‌های Key-value یک دو نقطه (:) میان خود دارند؛ مانند “key” : “value”. هر جفت Key-value هم با یک کاما از یکدیگر جدا می‌شوند؛ مثلاً “key” : “value”, “key” : “value”, “key”: “value”.

کسانی است که به‌تازگی وارد دنیای برنامه‌نویسی شده‌اند، می‌توانند برای شناخت کامل api و کاربرد آن مقاله زیر را بخوانند.

API چیست؟

کلیدهای JSON در سمت چپ کولون قرار دارند و باید بین دو، علامت نقل‌قول قرار بگیرند؛ مانند: “key”. مقادیر JSON در سمت راست کولون دیده می‌شوند و در سطح granular، باید یکی از ۶ نوع داده زیر باشند:

  • رشته‌ها (Strings)
  • شماره‌ها (Numbers)
  • اشیاء (Objects)
  • آرایه‌ها (Arrays)
  • بولی (درست یا نادرست) (Booleans)
  • خالی (Null)

در سطوح‌ گسترده‌تر، مقادیر می‌توانند از انواع داده‌های پیچیده Objects یا Arrays جیسون ساخته شوند. هر‌یک از داده‌هایی که به‌عنوان مقادیر به JSON ارسال می‌شوند، نحو خاص خود را حفظ می‌کنند. بنابراین، Strings در گیومه قرار می‌گیرند. البته توجه کنید که در فایل‌های json.، معمولاً قالب را در چندین خط گسترش می‌دهیم؛ اما می‌توان JSON را به‌صورت فشرده در یک خط نوشت:

{ "first_name" : "Sammy", "last_name": "Shark",  "online" : true, }

این موضوع در فایلی دیگر یا زمانی که با یک رشته JSON مواجه می‌شوید، بیشتر به‌چشم می‌خورد. نوشتن فرمت JSON در چندین خط آن را بسیار خواناتر می‌کند؛ پس وقتی با مجموعه بزرگی از اطلاعات سر‌و‌کار دارید، بهتر است فرمت JSON را در چند خط بنویسید. جیسون فضای خالی بین عناصر خود را نادیده می‌گیرد؛ بنابراین، بین جفت‌های‌ Key-value می‌توانید فاصله بیندازید تا داده‌ها برای کاربران خواناتر شوند:

{ 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

توجه کنید که شیء JSON دقیقاً همان قالب شیء جاوا‌اسکریپت نیست؛ به‌همین‌دلیل، از توابع در اشیای جاوااسکریپت می‌توانید استفاده کنید؛ اما از آن‌ها به‌عنوان مقادیر در JSON نمی‌توانید بهره ببرید. بهترین و مهم‌ترین ویژگی JSON این است که می‌توان آن را به‌راحتی بین زبان‌های برنامه‌نویسی به‌گونه‌ای انتقال داد که تمام زبان‌های برنامه‌نویسی از آن استفاده کنند. این در حالی است که با اشیای جاوااسکریپت فقط می‌توان مستقیماً از‌طریق زبان برنامه‌نویسی JavaScript کار کرد.

تا این‌جا، فرمت JSON را در ساده‌ترین شرایط توضیح دادیم؛ اما جیسون می‌تواند از سلسله‌مراتبی پیچیده و متشکل از اشیاء و آرایه‌های تو‌در‌تو تشکیل شود. در‌ادامه، درباره کدهای پیچیده‌تر JSON صحبت می‌کنیم.

نحوه کار با کدهای JSON پیچیده

JSON علاوه‌بر آرایه‌های تودرتو، می‌تواند اشیای تودرتو را هم در قالب JSON ذخیره کند. این اشیاء و آرایه‌ها به‌عنوان مقادیری ارسال خواهند شد که به Key اختصاص داده می‌شوند. این اشیاء و آرایه‌ها معمولاً از جفت‌های Key-value تشکیل می‌شوند.

برای آموزش رندر‌کردن وب ‌اپلیکیشن‌‌های تک‌صفحه‌ای با استفاده از React App مقاله زیر را بخوانید.

فعال‌سازی رندرینگ سمت سرور برای React App

1. اشیای تودرتو (Nested Objects)

در فایل users.json که درادامه آمده است، برای هرکدام از چهار کاربر (“sammy”, “jesse”, “drew”, “jamie”) یک شیء JSON تودرتو وجود دارد که به‌عنوان value برای هریک از کاربران ارسال می‌شود. کلیدهای تودرتو “username” و “location” به هریک از کاربران مرتبط است. اولین شیء JSON تودرتو را در زیر به‌صورت بولد‌شده مشخص کردیم:

{ 
  "sammy" : {
    "username"  : "SammyShark",
    "location"  : "Indian Ocean",
    "online"    : true,
    "followers" : 987
  },
  "jesse" : {
    "username"  : "JesseOctopus",
    "location"  : "Pacific Ocean",
    "online"    : false,
    "followers" : 432
  },
  "drew" : {
    "username"  : "DrewSquid",
    "location"  : "Atlantic Ocean",
    "online"    : false,
    "followers" : 321
  },
  "jamie" : {
    "username"  : "JamieMantisShrimp",
    "location"  : "Pacific Ocean",
    "online"    : true,
    "followers" : 654
  }
}

2. آرایه‌های تودرتو (Nested Arrays)

داده‌ها را با استفاده از آرایه‌های JavaScript که به‌عنوان مقدار ارسال می‌شوند، می‌توان در قالب JSON تودرتو کرد. جاوا‌اسکریپت از براکت [ ] در انتهای آرایه خود استفاده می‌کند. آرایه‌ها مجموعه‌های مرتب‌شده‌ای هستند و مقادیر زیادی از داده‌های مختلف را می‌توانند داشته باشند. زمانی که داده‌های زیادی داریم و این داده‌ها می‌توانند با یکدیگر گروه‌بندی شوند، احتمالاً از آرایه‌ای استفاده می‌کنیم. درادامه، اولین آرایه تودرتو را به‌صورت بولد‌شده مشخص کردیم:

{ 
  "first_name" : "Sammy",
  "last_name" : "Shark",
  "location" : "Ocean",
  "websites" : [
    {
      "description" : "work",
      "URL" : "https://www.digitalocean.com/"
    },
    {
      "desciption" : "tutorials",
      "URL" : "https://www.digitalocean.com/community/tutorials"
    }
  ],
  "social_media" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/digitalocean"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
    },
    {
      "description" : "github",
      "link" : "https://github.com/digitalocean"
    }
  ]
}

کار با Nesting در قالب JSON به ما امکان می‌دهد تا روی داده‌های پیچیده‌تر هم بتوانیم کار کنیم.

نمونه کد json

ساختار json و کدهایش چطور است؟

مقایسه JSON با XML

XML یا زبان نشانه‌گذاری توسعه‌یافته راهی برای ذخیره داده‌های دردسترس است که آن را هم انسان و هم ماشین‌ می‌تواند بخواند. فرمت یا قالب XML برای بسیاری از زبان‌های برنامه‌نویسی دردسترس است. در اکثر مواقع، XML شباهت بسیار زیادی به JSON دارد؛ اما درمقابل، به متن بیشتری هم نیاز دارد و خواندن و نوشتن در XML طولانی‌تر و وقت‌گیرتر است.

نکته دیگر اینکه XML باید با تجزیه‌کننده XML تجزیه شود؛ اما JSON را می‌توان با تابع استاندارد تجزیه کرد. شایان ذکر است که برخلاف JSON، در XML نمی‌توان از آرایه‌ها استفاده کرد. در این‌جا، ابتدا به نمونه‌ای از فرمت XML و سپس به همان داده‌های ارائه‌شده در JSON نگاهی می‌اندازیم:

<users>
    <user>
        <username>SammyShark</username> <location>Indian Ocean</location>
    </user>
    <user>
        <username>JesseOctopus</username> <location>Pacific Ocean</location>
    </user>
    <user>
        <username>DrewSquir</username> <location>Atlantic Ocean</location>
    </user>
    <user>
        <username>JamieMantisShrimp</username> <location>Pacific Ocean</location>
    </user>
</users>

حالا همان داده‌های ارائه‌شده در JSON ازاین‌قرار است:

{"users": [
  {"username" : "SammyShark", "location" : "Indian Ocean"},
  {"username" : "JesseOctopus", "location" : "Pacific Ocean"},
  {"username" : "DrewSquid", "location" : "Atlantic Ocean"},
  {"username" : "JamieMantisShrimp", "location" : "Pacific Ocean"}
] }

با مقایسه این دو قالب متوجه می‌شویم که JSON بسیار فشرده‌تر است و به تگ‌های پایانی هم نیازی ندارد؛ در‌حالی‌که XML به تگ‌های پایانی نیازمند است و درمقایسه‌با JSON فشردگی کمتری دارد. در این مثال، XML برخلاف JSON از آرایه استفاده نمی‌کند. در‌صورتی‌که با HTML آشنا باشید، به‌خوبی متوجه می‌شوید که XML در استفاده از تگ‌ها شباهت بسیار زیادی با آن دارد.

چطور اولین برنامه جاوا اسکریپت خود را بنویسیم؟ برای آموزش مقاله زیر را بخوانید.

برنامه نویسی جاوا اسکریپت

جمع‌بندی

JSON فرمتی سبک است که با استفاده از آن به‌راحتی می‌توانید داده‌ها را به‌اشتراک‌ بگذارید و با آن‌ها کا‌ر و ذخیره‌شان کنید‌. در این مقاله از آموزش برنامه نویسی بک اند، کدهای جیسون را معرفی کردیم و ساختار آن‌ها را شرح دادیم و به تفاوت‌های میان XML و JSON اشاره کردیم. امیدواریم با خواندن این مقاله، دیدی کلی به کدها و ساختار JSON پیدا کرده باشید. اگر شما هم درباره کدهای JSON نظری دارید، آن را در بخش دیدگاه‌ها با ما در میان بگذارید.

سؤالات متداول

۱. Json چیست؟

JSON مخفف عبارت JavaScript Object Notation به‌معنای «نمادگذاری اشیاء در جاوا‌اسکریپت» است. جیسون روشی برای نشان‌دادن اشیای داده‌ها هنگام ارسال در اینترنت است.

۲. Json چه کاربردی دارد؟

در این قالب، می‌توانید داده‌ها را به‌اشتراک بگذارید و با آن‌ها کار و ذخیره‌شان کنید.

۳. XML چیست؟

XML یا زبان نشانه‌گذاری توسعه‌یافته راهی برای ذخیره داده‌های دردسترس است که هم انسان و هم ماشین می‌تواند آن‌ها را بخواند.

۴. نحوه کار با کدهای JSON پیچیده چگونه است؟

JSON می‌تواند علاوه‌بر آرایه‌های تودرتو، اشیای تودرتو را هم در قالب JSON ذخیره کند. این اشیاء و آرایه‌ها به‌عنوان مقادیری ارسال خواهند شد که به Key اختصاص داده می‌شوند.

۵. JSON با XML چه تفاوتی دارد؟

XML به متن بیشتری نیاز دارد و خواندن و نوشتن‌ آن طولانی‌تر از JSON است. نکته دیگر اینکه XML باید با استفاده از تجزیه‌کننده‌ XML تجزیه شود؛ در‌حالی‌که JSON را می‌توان با تابع استاندارد تجزیه کرد.

منبع:

digitalocean.com

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


ارسال دیدگاه در وبلاگ پارس‌پک را مطالعه کرده و آن‌ها را می‌پذیرم.

مقالات مرتبط این مطلب را از دست ندهید

با خدمات ابری پارس پک آشنا شوید

اولین ارائه‌دهنده خدمات رایانش ابری در ایران هستیم