مقدمه‌ای کامل بر JSON

اگر یک تازه‌کار در دنیای وب باشید و فارغ از HTML و CSS کمی جاوااسکریپت هم بدانید، ممکن است با JSON نیز برخورد کرده و کمی درباره آن اطلاعاتی داشته باشید.

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

تعریف JSON

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

یک مثال از سینتکس JSON:

{
  "species": "Dog",
  "breed": "Labrador Retriever",
  "color": "Yellow",
  "age": 6
}

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

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

تاریخچه‌ای کوتاه از JSON

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

نسخه رسمی که از JSON ارائه شد در سال ۲۰۱۳ و در استانداردهای اکما ۴۰۴ بود. اما وجودیت JSON به خیلی سال پیش برمی‌گردد.

وبسایت JSON در سال ۲۰۰۲ ساخته شد. گوگل و یاهو نیز در سال ۲۰۰۵ و ۲۰۰۶ از JSON استفاده می‌کردند. از این رو موضوع چندان جدیدی نیست. اگر قصد دارید تا تاریخچه کاملی از JSON را مطالعه کنید به صفحه مربوطه در ویکی‌پدیا مراجعه کنید..

تفاوت JSON و JS Object

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

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

{
  foo: "bar"
}

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

{
  "foo": "bar"
}

در جاوااسکریپت می‌توانید از تک کوتیشن استفاده کنید، اما برای JSON انجام چنین کاری با خطا روبرو می‌شود.

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

• Object
• Array
• Number
• String
• true
• false
• null

از آنجایی که JSON صرفا یکسری داده متنی است، نمی‌تواند المان‌های تعاملی و پویا را در خود نگه دارد. برای مثال شما نمی‌توانید در JSON از توابع استفاده کنید و یا آنکه Date() را فراخوانی نمایید. از این رو هیچگونه متد یا تابعی در این زبان وجود ندارد.

به عنوان یک نکته مهم باید گفت که خود JSON در واقع یک شئ معتبر است. منظور این است که شما یک شئ اصلی دارید که خود محتویات JSON شامل آن می‌شود. البته شما می‌توانید شئ‌های دیگری را نیز در داخل آن داشته باشید. بیایید به یک مثال نگاه کنیم:

// Valid JSON
{
  "species": "Dog",
  "breed": "Labrador Retriever",
  "age": 6,
  "traits": {
    "eyeColor": "brown",
    "coatColor": "yellow",
    "weight": "137lbs"
  }
}

شما در اینجا یک شئ ریشه‌ای دارید که چهار کلید species تا traits را در خود دارد. اما تفاوتی که کلید traits با بقیه موارد دارد این است که در خود این کلید یک شئ دیگر وجود دارد. بنابراین ما در حال ساخت اشیاء به صورت تودرتو هستیم. 

برای داشتن چنین سورسی در جاوااسکریپت شما باید به صورت زیر عمل کنید:

// JS object; not valid JSON
let myAnimal = {
  species: "dog",
  breed: "Labrador Retriever",
  age: 6,
  traits: {
    eyeColor: "brown",
    coatColor: "yellow",
    weight: "137lbs"
  }
}

موضوع اول این است که شما یک شئ ریشه‌ای در فایل ندارید، موضوع دوم آنکه همانطور پیش‌تر گفته شد کلیدها با کوتیشن نوشته نمی‌شوند و در نهایت شما برای آنکه به یک شئ دسترسی داشته باشید باید حتما آن را به یک متغیر انتساب دهید.

چگونه باید JSON را ذخیره کرد؟

از آنجایی که JSON تنها یک فرمت متنی ساده است، شما برای ذخیره سازی آن مشکلی نخواهید داشت. شما می‌توانید در هر جایی آن را به هر صورتی ذخیره کنید. می‌توانید آن را در یک دیتابیس قرار دهید و یا آنکه می‌توانید به صورت ذخیره‌سازی کلاینت (localStorage یا کوکی) آن را ذخیره نمایید. همچنین می‌توانید در یک فایل متنی ساده آن را قرار دهید، اما فرمت مخصوصی نیز برای JSON وجود دارد که می‌توانید با استفاده از آن فایل تان را ذخیره کنید. .json نام این فرمت است.

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

در این آموزش ما قصد استفاده از زبان جاوااسکریپت را داریم.

استفاده از متد JSON.stringify()

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

بیایید تصور کنیم که قصد ساخت یک رشته متنی معتبر از JSON را دارید. برای اینکار اگر در برنامه‌تان اطلاعات لازم قرار گرفته باشد «مثلا یک شئ یا دیکشنری از یکسری داده» انجام کارتان ساده خواهد بود. JSON.stringify() متدی است که به شما این قابلیت را می‌دهد تا بتوانید JSON معتبر تولید کنید.

let myJSON = {
  species: "Dog",
  breed: "Labrador Retriever",
  age: 6,
  traits: {
    eyeColor: "brown",
    coatColor: "yellow",
    weight: "137lbs"
  }
};

let myNewJSON = JSON.stringify(myJSON, null, '\t');

/* output of myNewJSON:
{
  "species": "Dog",
  "breed": "Labrador Retriever",
  "age": 6,
  "traits": {
    "eyeColor": "brown",
    "coatColor": "yellow",
    "weight": "137lbs"
  }
}
*/

متد JSON.stringify() یک ورودی اجباری دریافت می‌کند و آن ورودی شئ‌ است که شما قصد تبدیل آن به رشته JSON را دارید. ورودی دوم و سوم، ورودی‌های اختیاری هستند. ورودی دوم زمانی استفاده می‌شود که شما نخواهید یکی از کلید/مقدارها در خروجی قرار بگیرد. من در اینجا ورودی دوم را null قرار دادم. از این قرار من می‌خواهم همه کلید/مقادیر م را در خروجی مشاهده کنم. اما چرا اگر ورودی اختیاری است و پیشفرض روی null قرار دارد از آن استفاده کردم؟ خب این موضوع بدان دلیل است که من با ورودی یا پارامتر سوم کار داشتم. اگر بخواهم به ورودی سوم مقداری غیر از مقدار پیشفرض بدهم باید حتما ورودی دوم را نیز وارد کنم.

ورودی سوم برای قالب‌دهی بهتر به رشته خروجی استفاده می‌شود. با بهره‌گیری از این مورد شما می‌توانید خروجی خواناتری را ارائه دهید. t\ ورودی است که من وارد کرده‌ام. این بدان معناست که برای هر خط از خروجی یک tab به صورت پیشفرض اضافه کند تا بهتر کدها قابلیت خوانایی داشته باشند.

استفاده از JSON.parse()

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

let myJSON = '{"species":"Dog","breed":"Labrador Retriever","age":6,"traits":{"eyeColor":"brown","coatColor":"yellow","weight":"137lbs"}}';

let myNewJSON = JSON.parse(myJSON);

// logs a JavaScript object, not a string
console.log(myNewJSON);

در خط ابتدای برنامه یک رشته JSON به صورت دستی ایجاد شده و حال نتیجه parse کردن آن را در یک متغیر جدید به نام myNewJSON قرار می‌دهیم.

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

let myNewJSON = JSON.parse(myJSON, function (name, value) {
  if (name === "species") {
    value = "Cat";
  }
  return value;
});

دسترسی به داده‌ها از طریق جاوااسکریپت

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

console.log(myNewJSON.species); // "Dog"
console.log(myNewJSON.breed); // "Labrador Retriever"
console.log(myNewJSON.age); // 6

حتی اگر اشیاء و مقادیر به صورت تو در تو ایجاد شده باشند نیز می‌توانم به صورت زیر به آن‌ها دسترسی داشته باشم:

console.log(myNewJSON.traits);
/*
[object Object] {
  coatColor: "yellow",
  eyeColor: "brown",
  weight: "137lbs"
}
*/

console.log(myNewJSON.traits.coatColor); // "yellow"
console.log(myNewJSON.traits.eyeColor); // "brown"
console.log(myNewJSON.traits.weight); // "137lbs"

اما فارغ از دسترسی، شما می‌توانید روی این اشیاء تغییراتی را نیز اعمال کنید. برای مثال:

myNewJSON.age = 7;
delete myNewJSON.traits.weight;
myNewJSON.traits.cuddly = true;

console.log(myNewJSON);

/*
[object Object] {
  age: 7,
  species: "Dog",
  breed: "Labrador Retriever",
  traits: [object Object] {
    coatColor: "yellow",
    cuddly: true,
    eyeColor: "brown"
  }
}
*/

در این کدها من مقدار age را تغییر دادم، weight را حذف کردم و یک خصوصیت جدید به شئ traits اضافه نمودم.

حال می‌توانم برای اعمال تغییرات و تبدیل آن‌ها به یک فایل JSON دیگر از متد stringify دوباره استفاده کنم.

ابزارهای JSON

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

JSONLint – این ابزار به شما کمک می‌کند تا داده‌های JSON را اعتبارسنجی کنید. اگر به تازگی در حال شروع یادگیری JSON هستید بهتر است از چنین ابزاری استفاده کنید.

json.browse – یک ابزار آنلاین که به شما اجازه می‌دهد تا داده های JSON را تغییر دهید، زیبا کنید و در بین آن‌ها جستجو نمایید.

JSONedit – ابزاری بصری برای ایجاد داده‌های JSON.

در کنار این موارد می‌توانید از JSON Generator، Hjson، Myjson، jsonbin و Kinto نیز استفاده کنید. 

در پایان

امیدوارم که در این مطلب توانسته باشم که شما را با موضوعات ابتدای JSON آشنا کنم و شما را در مقدمات این راه یاری داده باشم. یادگیری JSON مقدمه‌ای برای کار با Restful API و موارد دیگری خواهد بود.

منبع