Cara Menggunakan JSON.parse() dan JSON.stringify()

Pengantar

Objek JSON, yang tersedia di semua peramban modern, memiliki dua metode berguna untuk menangani konten yang berformat JSON: parse dan stringify. JSON.parse() mengambil string JSON dan mengubahnya menjadi objek JavaScript. JSON.stringify() mengambil objek JavaScript dan mengubahnya menjadi string JSON.

Berikut adalah contohnya:

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"

console.log(JSON.parse(myObjStr));
// Object {name:"Sammy",age:6,favoriteFood:"Tofu"}

Meskipun metode itu biasanya digunakan pada objek, tetapi dapat juga digunakan pada larik:

const myArr = ['bacon', 'lettuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
// "["shark","fish","dolphin"]"

console.log(JSON.parse(myArrStr));
// ["shark","fish","dolphin"]

JSON.parse()

JSON.parse() dapat mengambil fungsi sebagai argumen kedua yang dapat mengubah nilai objek sebelum mengembalikannya. Di sini, nilai-nilai objek diubah menjadi huruf besar dalam objek yang dikembalikan dari metode parse:

const user = {
  name: 'Sammy',
  email: 'Sammy@domain.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user);

JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

JSON.stringify()

JSON.stringify() dapat mengambil dua argumen tambahan, yang pertama menjadi fungsi replacer dan yang kedua menjadi nilai String atau Number yang digunakan sebagai space dalam string yang dikembalikan.

Fungsi replacer dapat digunakan untuk menyaring nilai, karena nilai yang dikembalikan sebagai undefined akan dikeluarkan dari string yang dikembalikan:

const user = {
  id: 229,
  name: 'Sammy',
  email: 'Sammy@domain.com'
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"Sammy"}"

Contoh dengan argumen space yang disalurkan:

const user = {
  name: 'Sammy',
  email: 'Sammy@domain.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user, null, '...');
// "{
// ..."name": "Sammy",
// ..."email": "Sammy@domain.com",
// ..."plan": "Pro"
// }"

Kesimpulan

Dalam tutorial ini, Anda telah mendalami cara menggunakan metode JSON.parse() dan JSON.stringify(). Jika Anda ingin mempelajari lebih lanjut tentang menggunakan JSON di Javascript, lihat tutorial Cara Menggunakan JSON di JavaScript dari kami.

Untuk informasi lebih lanjut tentang pengodean di JavaScript, lihat seri Cara Melakukan Pengodean di JavaScript dari kami, atau lihat halaman topik JavaScript kami untuk latihan dan proyek pemrograman.