Press "Enter" to skip to content

Cara Mudah Menggunakan JSON di Javascript

Pada tutorial kali ini saya akan membahas tutorial tentang cara penggunaan JSON di Javascript dengan menggunakan fungsi yang disediakan oleh Javascript yaitu JSON.stringify() dan JSON.parse().

Apa itu JSON ?

Sebelum saya membahas lebih dalam tentang penggunaan JSON di Javascript ada baiknya kita berkenalan kembali dengan JSON.

Apa itu JSON ? JSON adalah singkatan dari JavaScript Object Notation yaitu sebuah format data yang digunakan untuk pertukaran dan penyimpanan data. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 – Desember 1999.

JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dll. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data.

JSON sangat disukai oleh developer karena format yang dimiliki JSON sangat mudah dibaca dan mendukung banyak bahasa pemrograman sehingga proses pertukaran data antar aplikasi bisa dilakukan dengan sangat mudah dan cepat.

Ada dua fungsi yang bisa kita gunakan untuk memanipulasi data JSON yaitu JSON.stringify() dan JSON.parse().

Konversi Objek Menjadi Data JSON di Javascript Dengan JSON.stringify()

JSON.stringify() adalah fungsi Javasript yang digunakan untuk mengubah objek maupun array pada Javascript menjadi data JSON.

Berikut contoh kode untuk mengubah objek menjadi data JSON di Javascript dengan JSON.stringify() :

const obj = {
  nama: 'Mamat',
  usia: 20,
  pekerjaan: 'Mahasiswa'
};

const jsonObj = JSON.stringify(obj);
console.log(jsonObj);

Fungsi stringify di kode diatas akan mengkonversi objek obj, output yang dihasilkan adalah sebagai berikut :

{"nama":"Mamat","usia":20,"pekerjaan":"Mahasiswa"}

Selain objek, stringify juga dapat mengkonversi array menjadi sebuah data JSON, namun karena javascript tidak mendukung Array Multidimensi maka kita hanya dapat menggunakan array list saja.

const arr = ['PHP','Javascript','Golang','Ruby'];
const jsonArr = JSON.stringify(arr);
console.log(jsonArr);

// output : ["PHP","Javascript","Golang","Ruby"]

Selain itu, JSON.stringify() dapat menggunakan dua argumen tambahan, yang pertama adalah replacer dan yang kedua adalah spacer.

Baca Juga : Tutorial Penggunaan JSON Web Token (JWT) Menggunakan PHP

JSON.stringify() – Replacer

Sederhananya, argumen replacer akan menimpa objek yang sudah ada sebelum akhinya dikonversikan kedalam bentuk JSON dengan stringify.

Untuk menggunakan argumen replacer, kita dapat menggunakan sebuah fungsi untuk menghapus key tertentu dari objek dengan sebuah kondisi.

const user = { username: 'maman', name: 'Maman', password: 'hashing-password' };

function replacer(key, value) {
  if (key === 'password') {
    return undefined;
  }
  return value;
}

const userJson = JSON.stringify(user, replacer);

console.log(userJson);

// output : {"username":"maman","name":"Maman"}

Pada kode diatas, fungsi replacer akan menghapus key dengan nama password kemudian mengkonversikan hasilnya menjadi data JSON sehingga key password tidak disertakan kedalam data JSON tersebut.

JSON.stringify() – Spacer

Fungsi dari spacer sendiri hanya untuk mempercantik kode JSON sehingga lebih mudah dibaca. Kamu dapat menggunakan string ataupun number kedalam argumen spacer tersebut. Berikut contohnya :

const user = {
  username: 'maman',
  name: 'Maman',
  password: 'hashing-password'
};

const userJson = JSON.stringify(user);
console.log(userJson);
// OUTPUT TANPA SPACER : 
// {"username":"maman","name":"Maman","password":"hashing-password"}

const userJsonSpacer = JSON.stringify(user, null, '   ');
console.log(userJsonSpacer);

// OUTPUT DENGAN SPACER :
// {
//   "username": "maman",
//   "name": "Maman",
//   "password": "hashing-password"
// }

Pada kode diatas saya menambahkan 3 spasi agar data JSON dapat menjorok kedalam sehingga data JSON tersebut dapat lebih mudah dibaca. Bandingkan dengan output sebelumnya yang tidak menggunakan spacer.

Baca Juga : Membuat JSON Feed Dengan Laravel Framework

Tapi fungsi ini sangat jarang sekali digunakan karena secara tidak langsung fungsi ini akan menambah ukuran dari file JSON sehingga akan menambah resource pada output.

Konversi Data JSON di Javascript Dengan JSON.parse()

Kebalikan dari JSON.stringify(), fungsi dari JSON.parse() adalah untuk membaca data JSON kemudian mengkonversikan data tersebut menjadi objek Javascript sehingga objek tersebut dapat ditampilkan ataupun diubah kembali.

Berikut contoh penggunaan JSON di Javascript dengan JSON.parse() :

const obj = {
  nama: 'Mamat',
  usia: 20,
  pekerjaan: 'Mahasiswa'
};

const jsonObj = JSON.stringify(obj);
const parseObj = JSON.parse(jsonObj);

console.log(parseObj);

// output : { nama: 'Mamat', usia: 20, pekerjaan: 'Mahasiswa' }

Output yang dihasilkan dari kode diatas adalah sebuah objek Javascript yang sudah di terjemahkan dari data JSON sehingga format dari objek tersebut sama persis dengan variabel obj sebelum di konversikan kedalam data JSON.

Sama seperti JSON.stringify(), JSON.parse() juga dapat menggunakan argumen tambahan yaitu Reviver.

JSON.parse() – Reviver

Fungsi dari Reviver ini adalah untuk memformat value yang ada pada item JSON ketika proses konversi ke dalam bentuk objek Javascript sehingga format value tersebut dapat berbeda dengan dengan sebelum proses konversi.

Berikut contoh kode untuk mengkonversi data JSON di Javascript dengan menggunakan JSON.parse() dan argumen reviver.

const obj = {
  nama: 'Mamat',
  usia: 20,
  pekerjaan: 'Mahasiswa'
};

const jsonObj = JSON.stringify(obj);

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

console.log(parseObj);

// output : { nama: 'MAMAT', usia: 20, pekerjaan: 'MAHASISWA' }

Pada kode diatas, ketika dalam proses konversi maka item yang memiliki tipe data String akan di format ulang menjadi kapital atau uppercase. Kamu juga dapat mengubah item tersebut sesuai dengan kebutuhan kamu.

Sekian dulu tutorial saya tentang cara penggunaan JSON di Javascript dengan menggunakan JSON.stringify() dan juga JSON.parse(). Silahkan dicoba dan semoga bermanfaat.

Be First to Comment

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *