جاوا اسکریپتطراحی وبمقالات

چگونه از JSON.parse و JSON.stringify در javascript استفاده کنیم ؟

0

JSON مخفف JavaScript Object Notation است. میشه گفت JSON یک قالب داده قابل خواندن توسط انسان هستش که معمولاً برای تبادل داده ها بین مرورگر وب ، کلاینت و سرور مورد استفاده قرار می گیره. بیشتر API های مدرن از فرمت های JSON به عنوان خروجی استفاده می کنن. به همین دلیل JSON در حال تبدیل شدن به قالب محبوب داده برای خروجی API است.

JavaScript به عنوان یکی از محبوب ترین زبان های قرن ۲۱ ام دو روش برای کار با محتوای JSON فراهم می کند. یعنی استفاده از توابع JSON.parse و JSON.stringify .

JSON.parse : این تایع یک رشته json رو به عنوان ورودی از شما دریافت میکنید و اون رو تبدیل میکند به یک javascript object.

JSON.stringify : این تابع دقیقا برعکس متد قبلی عمل میکند، به این معنی که یک javascript object را به عنوان ورودی از شما دریافت و اون رو تبدیل به یک json string می کند.

  • JSON.parse

مثالی از استفاده ی Json.parse در جاوا اسکریپت رو میتونید در تکه کد زیر ببینید :

// Store JSON data in a JavaScript variable
var json = '{"id": 1, "name": "Amir kaftari", "country": "Iran"}';
 
// Convert JSON string to JavaScript object
var obj = JSON.parse(json);
 
// Access individual values from the JavaScript object
console.log(obj.id);   // Outputs: 1
console.log(obj.name);   // Outputs: Amir kaftari
console.log(obj.country);   // Outputs: Iran

همچنین شما می توانید یک تابع را به عنوان آرگومان دوم (اختیاری) به تابع JSON.parse پاس بدید تا یک عملیات خاص روی هر مقدار از JSON مورد نظر شما انجام دهد. در ادامه مثالی آوردم که یک تابع تمام مقادیر از نوع رشته رو به حروف بزرگ تبدیل می کند:

// Store JSON data in a JavaScript variable
var json = '{"id": 1, "name": "Amir kaftari", "country": "Iran"}';
 
// Convert JSON string to JavaScript object
var obj = JSON.parse(json, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});
 
// Access individual values from the JavaScript object
console.log(obj.id);  // Outputs: 1
console.log(obj.name);  // Outputs: AMIR KAFTARI
console.log(obj.country);  // Outputs: IRAN
  • JSON.stringify

همانطور که گفتم این تایع برای تبدیل یک شی JavaScript به رشته JSON استفاده می شود. می توانید به سادگی یک شی JavaScript را به این تابع منتقل کنید و یک آرایه JSON دریافت کنید. به مثال زیر دقت کنید :

// Create a JavaScript object 
var obj = {id: 1, name: "Amir katari", country: "Iran"}
 
// Converting JS object to JSON string
var json = JSON.stringify(obj);
 
console.log(json);   
//Expected output: {"id":1,"name":"Amir kaftari","country":"Iran"}

همجنین شما میتوانید دو آرگومان اضافی را به این تایع پاس بدهید، اولی نقش replacer یا فیلتر کننده و آرگومان بعدی نقش اضاقه کردن مقدار space به خروجی را دارند.

استفاده از تابع  برای replacer

برای فیلتر کردن مقادیر خروجی از یک تابع replacer استفاده می شود. به عنوان مثال ، شما می توانید یک تابع ایجاد کنید و آن را به عنوان آرگومان منتقل کنید. این تابع هر مقدار رشته را به صورت تعریف نشده در نظر میگیرد و در نهایت شما تنها مقادیر عددی را در خروجی خود خواهید داشت. مثال زیر این نکته رو برای شما شفاف تر میکند :

//JavaScript object 
var obj = {id: 1, name: "Amir katari", age: 33, country: "Iran"}
 
function replacer(key, value) {
  // Filtering out properties
  if (typeof value === 'string') {
    return undefined;
  }
  return value;
}
 
// Using a replacer function
console.log(JSON.stringify(obj, replacer));
//Expected output: {"id":1, "age": 33}

استفاده از آرایه برای replacer

همچنین می توانید آرایه ای حاوی مقادیری که میخواهید فیلتر شوند را به عنوان جایگزین منتقل کنید. در اینجا تابع stringify فقط مقادیر مطابق با key-pare را که شما ارسال کردید به عنوان خروجی برمی گرداند.

به عنوان مثال ، من id و name را در یک آرایه به عنوان تابع جایگزین ارسال کردم. در این حالت فقط آن مقادیر به عنوان شی JS برمی گردند و مقادیر دیگر را کنار می گذارد.

// Using a replacer function
console.log(JSON.stringify(obj, replacer));
//Expected output: {"id":1, "age": 33}


// Create a JavaScript object 
var obj = {id: 1, name: "Amir katari", age: 33, country: "Iran"}
 
// Converting JS object to JSON string with array replacer
console.log(JSON.stringify(obj, ["id", "name"]));
//Expected output: {"id":1, "name": "Amir kaftari"}

ارسال آرگومان space

دومین آرگومانی که شما می توانید به تایع JSON.stringify ارسال کنید مقدار space است. این آرگومان باعث می شود که خروجی شما خواناتر شود. به مثال زیر دقت کنید :

// Create a JavaScript object 
var obj = {id: 1, name: "Amir katari", age: 33, country: "Iran"}
 
// Empty replacer function
function replacer(key, value) {
  return value;
}
 
// Using optional space argument
console.log(JSON.stringify(obj, replacer, ' ');
//Expected output
//{
// "id": 1,
// "name": "Amir kaftari",
// "age": 33,
// "country": "Iran"
//}
 
// Using a tab as space argument
console.log(JSON.stringify(obj, replacer, '\t');
//Expected output
//{
//	"id": 1,
//	"name": "Amir kaftari",
//	"age": 33,
//	"country": "Iran"
//}

نتیجه گیری

در این آموزش من یاد گرفتم که چطور میتونم به شکل صحیح از JSON.parse و JSON.stringify استفاده کنم.

تصویر قاب پیکسل ۳ لایت گوگل فاش شد

مقاله قبلی

چگونه در PHP مقادیر تکراری را از یک آرایه پاک کنیم؟

مقاله بعدی

شما همچنین ممکن است دوست داشته باشید

نظرات

پاسخ دهید

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