Biasanya digunakan untuk mentransmisikan data dalam aplikasi web (misalnya mengirim beberapa data dari server ke klien, sehingga dapat ditampilkan di halaman web, atau sebaliknya). Lebih lanjut, akan dijelaskan mengenai cara menggunakan JavaScript dan mem-parsing JavaScript Object Notation (JSON) sehingga data dapat diakses dan JSON dibuat.

Pengertian JSON

JavaScript Object Notation (JSON) adalah format data berbasis teks  standar untuk merepresentasikan data terstruktur berdasarkan sintaks objek JavaScript, yang dipopulerkan oleh Douglas Crockford. Meskipun sangat mirip dengan sintaks literal objek JavaScript, ini dapat digunakan secara terpisah dari JavaScript, dan banyak lingkungan pemrograman menampilkan kemampuan untuk membaca (mengurai) dan menghasilkan JSON.

 JavaScript Object Notation (JSON) ada sebagai string – berguna saat Anda ingin mengirimkan data melalui jaringan. Perlu dikonversi ke objek JavaScript asli saat Anda ingin mengakses data. Ini bukan masalah besar – JavaScript menyediakan objek JSON global yang memiliki metode yang tersedia untuk mengonversi keduanya.

Catatan: Mengonversi string ke objek asli disebut deserialisasi, sedangkan mengonversi objek asli menjadi string sehingga dapat ditransmisikan melalui jaringan disebut serialisasi.

String JSON dapat disimpan dalam filenya sendiri, yang pada dasarnya hanyalah file teks dengan ekstensi .json, dan tipe MIME dari application/json.

Mempelajari JSON

Struktur JSON

Seperti dijelaskan di atas, JavaScript Object Notation (JSON) adalah string yang formatnya sangat mirip dengan format literal object JavaScript. Anda dapat menyertakan tipe data dasar yang sama di dalam JSON seperti yang Anda bisa dalam objek JavaScript standar string, angka, larik, boolean, dan literal objek lainnya. Ini memungkinkan Anda untuk membuat hierarki data, seperti:

{

  “squadName”: “Super hero squad”,

  “homeTown”: “Metro City”,

  “formed”: 2016,

  “secretBase”: “Super tower”,

  “active”: true,

  “members”: [

    {

      “name”: “Molecule Man”,

      “age”: 29,

      “secretIdentity”: “Dan Jukes”,

      “powers”: [“Radiation resistance”, “Turning tiny”, “Radiation blast”]

    },

    {

      “name”: “Madame Uppercut”,

      “age”: 39,

      “secretIdentity”: “Jane Wilson”,

      “powers”: [

        “Million tonne punch”,

        “Damage resistance”,

        “Superhuman reflexes”

      ]

    },

    {

      “name”: “Eternal Flame”,

      “age”: 1000000,

      “secretIdentity”: “Unknown”,

      “powers”: [

        “Immortality”,

        “Heat Immunity”,

        “Inferno”,

        “Teleportation”,

        “Interdimensional travel”

      ]

    }

  ]

}

Jika kita memuat string ini ke dalam program JavaScript dan menguraikannya ke dalam variabel yang disebut pahlawan super, misalnya, kita dapat mengakses data di dalamnya menggunakan notasi titik/braket yang sama seperti yang kita lihat di artikel dasar-dasar objek JavaScript. Sebagai contoh:

superHeroes.homeTown

superHeroes[‘active’]

Untuk mengakses data lebih jauh di hierarki, Anda harus menggabungkan nama properti dan indeks array yang diperlukan. Misalnya, untuk mengakses kekuatan super ketiga dari pahlawan kedua yang tercantum dalam daftar anggota, Anda akan melakukan ini:

superHeroes[‘members’][1][‘powers’][2]

1. Pertama, kita memiliki nama variabel – superHeroes.
2. Di dalamnya, kami ingin mengakses properti anggota, jadi kami menggunakan [“anggota”].
3. anggota berisi array yang diisi oleh objek. Kami ingin mengakses objek kedua di dalam array, jadi kami menggunakan [1].
4. Di dalam objek ini, kami ingin mengakses properti kekuatan, jadi kami menggunakan [“powers”].
5. Di dalam properti kekuatan ada larik yang berisi kekuatan super pahlawan yang dipilih. Kami menginginkan yang ketiga, jadi kami menggunakan

Catatan: Kami telah membuat JSON yang terlihat di atas tersedia di dalam variabel dalam contoh JSONTest.html kami (lihat kode sumber). Coba muat ini dan kemudian akses data di dalam variabel melalui konsol JavaScript browser Anda.

Array sebagai JSON

Di atas kami menyebutkan bahwa teks JSON pada dasarnya terlihat seperti objek JavaScript di dalam sebuah string. Kami juga dapat mengkonversi array ke/dari JSON. Di bawah ini juga JSON yang valid, misalnya:

[

  {

    “name”: “Molecule Man”,

    “age”: 29,

    “secretIdentity”: “Dan Jukes”,

    “powers”: [“Radiation resistance”, “Turning tiny”, “Radiation blast”]

  },

  {

    “name”: “Madame Uppercut”,

    “age”: 39,

    “secretIdentity”: “Jane Wilson”,

    “powers”: [

      “Million tonne punch”,

      “Damage resistance”,

      “Superhuman reflexes”

    ]

  }

]

Di atas adalah JSON yang benar-benar valid. Anda hanya perlu mengakses item array (dalam versi parse-nya) dengan memulai dengan indeks array, misalnya [0][“powers”][0].

Catatan lain

JSON murni string dengan format data tertentu – hanya berisi properti, tanpa metode.

JSON membutuhkan tanda kutip ganda untuk digunakan di sekitar string dan nama properti. Kutipan tunggal tidak valid selain mengelilingi seluruh string JSON.

Bahkan satu koma atau titik dua yang salah tempat dapat menyebabkan file JSON salah, dan tidak berfungsi. Anda harus berhati-hati untuk memvalidasi data apa pun yang Anda coba gunakan (walaupun JSON yang dihasilkan komputer cenderung tidak menyertakan kesalahan, selama program generator bekerja dengan benar). Anda dapat memvalidasi JSON menggunakan aplikasi seperti JSONLint.

JSON sebenarnya dapat berupa tipe data apa pun yang valid untuk dimasukkan ke dalam JSON, bukan hanya array atau objek. Jadi misalnya, satu string atau angka akan menjadi JSON yang valid.

Tidak seperti dalam kode JavaScript di mana properti objek dapat diberi tanda kutip, di JSON hanya string yang dikutip yang dapat digunakan sebagai properti.

Pembelajaran aktif: Bekerja melalui contoh JSON

Jadi, mari kita lihat sebuah contoh untuk menunjukkan bagaimana kita bisa menggunakan beberapa data berformat JSON di situs web.

Mulai

Untuk memulainya, buat salinan lokal dari file heroes.html dan style.css kita. Yang terakhir berisi beberapa CSS sederhana untuk menata halaman kita, sedangkan yang pertama berisi beberapa body HTML yang sangat sederhana, tambah elemen <script> untuk membuat kode JavaScript yang akan kita tulis dalam latihan ini:

<header>

</header>

<section>

</section>

<script>

</script>

Kami telah membuat data JSON kami tersedia di GitHub kami, di https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

Kami akan memuat JSON ke dalam skrip kami, dan menggunakan beberapa manipulasi DOM yang bagus untuk menampilkannya, seperti ini:

Top-level function

The top-level function looks like this:

async function populate() {

  const requestURL = ‘https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json’;

  const request = new Request(requestURL);

  const response = await fetch(request);

  const superHeroes = await response.json();

  populateHeader(superHeroes);

  populateHeroes(superHeroes);

}

Untuk mendapatkan JSON, kami menggunakan API yang disebut Fetch. API ini memungkinkan kami membuat permintaan jaringan untuk mengambil sumber daya dari server melalui JavaScript (mis. gambar, teks, JSON, bahkan cuplikan HTML), artinya kami dapat memperbarui sebagian kecil konten tanpa harus memuat ulang seluruh halaman.

Dalam fungsi kita, empat baris pertama menggunakan Fetch API untuk mengambil JSON dari server:

kami mendeklarasikan variabel request URL untuk menyimpan URL GitHub

kami menggunakan URL untuk menginisialisasi objek Permintaan baru.

kita membuat permintaan jaringan menggunakan fungsi fetch(), dan ini mengembalikan objek Response

kami mengambil respons sebagai JSON menggunakan fungsi json() dari objek Response.

Catatan: API fetch() tidak sinkron. Kita akan belajar banyak tentang fungsi asinkron di modul berikutnya, tetapi untuk saat ini, kita hanya akan mengatakan bahwa kita perlu menambahkan kata kunci async sebelum nama fungsi yang menggunakan API pengambilan, dan menambahkan kata kunci menunggu sebelum panggilan ke fungsi asinkron apa pun.

Setelah semua itu, variabel superHeroes akan berisi objek JavaScript berdasarkan JSON. Kami kemudian meneruskan objek itu ke dua pemanggilan fungsi – yang pertama mengisi <header> dengan data yang benar, sedangkan yang kedua membuat kartu informasi untuk setiap pahlawan dalam tim, dan memasukkannya ke dalam <section>.

Mengisi header

Sekarang setelah kita mengambil data JSON dan mengubahnya menjadi objek JavaScript, mari manfaatkan itu dengan menulis dua fungsi yang kita rujuk di atas. Pertama-tama, tambahkan definisi fungsi berikut di bawah kode sebelumnya:

function populateHeader(obj) {

  const header = document.querySelector(‘header’);

  const myH1 = document.createElement(‘h1’);

  myH1.textContent = obj.squadName;

  header.appendChild(myH1);

  const myPara = document.createElement(‘p’);

  myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;

  header.appendChild(myPara);

}

Di sini pertama-tama kita membuat elemen <h1> dengan createElement(), mengatur textContent-nya agar sama dengan properti squadName objek, lalu menambahkannya ke header menggunakan appendChild(). Kami kemudian melakukan operasi yang sangat mirip dengan paragraf: buat, atur konten teksnya, dan tambahkan ke header. Satu-satunya perbedaan adalah bahwa teksnya diatur ke template literal yang berisi homeTown dan properti objek yang dibentuk.

Membuat kartu informasi pahlawan

Selanjutnya, tambahkan fungsi berikut di bagian bawah kode, yang membuat dan menampilkan kartu pahlawan super:

function populateHeroes(obj) {

  const section = document.querySelector(‘section’);

  const heroes = obj.members;

  for (const hero of heroes) {

    const myArticle = document.createElement(‘article’);

    const myH2 = document.createElement(‘h2’);

    const myPara1 = document.createElement(‘p’);

    const myPara2 = document.createElement(‘p’);

    const myPara3 = document.createElement(‘p’);

    const myList = document.createElement(‘ul’);

    myH2.textContent = hero.name;

    myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;

    myPara2.textContent = `Age: ${hero.age}`;

    myPara3.textContent = ‘Superpowers:’;

    const superPowers = hero.powers;

    for (const power of superPowers) {

      const listItem = document.createElement(‘li’);

      listItem.textContent = power;

      myList.appendChild(listItem);

    }

    myArticle.appendChild(myH2);

    myArticle.appendChild(myPara1);

    myArticle.appendChild(myPara2);

    myArticle.appendChild(myPara3);

    myArticle.appendChild(myList);

    section.appendChild(myArticle);

  }

}

Untuk memulainya, kami menyimpan properti anggota dari objek JavaScript dalam variabel baru. Larik ini berisi banyak objek yang berisi informasi untuk setiap pahlawan.

Selanjutnya, kami menggunakan for…of loop untuk mengulang setiap objek dalam array. Untuk masing-masing, kami:

Buat beberapa elemen baru: <article>, <h2>, tiga <p>, dan <ul>.

Atur <h2> untuk memuat nama pahlawan saat ini.

Isi tiga paragraf dengan secretIdentity, age, dan baris bertuliskan “Superpowers:” untuk memperkenalkan informasi dalam daftar.

Simpan properti kekuatan di konstanta baru lainnya yang disebut Kekuatan super — ini berisi larik yang mencantumkan kekuatan super pahlawan saat ini.

Gunakan for…of loop lain untuk mengulang kekuatan super pahlawan saat ini — untuk masing-masing kita membuat elemen <li>, letakkan kekuatan super di dalamnya, lalu letakkan listItem di dalam elemen <ul> (myList) menggunakan appendChild() .

Hal terakhir yang kita lakukan adalah menambahkan <h2>, <p>s, dan <ul> di dalam <article> (myArticle), lalu menambahkan <article> di dalam <section>. Urutan hal-hal yang ditambahkan adalah penting, karena ini adalah urutan yang akan ditampilkan di dalam HTML.

Catatan: Jika Anda kesulitan membuat contoh berfungsi, coba merujuk ke kode sumber heroes-finished.html kami (lihat juga menjalankannya secara langsung.)

Catatan: Jika Anda mengalami masalah dalam mengikuti notasi titik/braket yang kami gunakan untuk mengakses objek JavaScript, ada baiknya membuka file superheroes.json di tab lain atau editor teks Anda, dan merujuknya saat Anda melihat JavaScript. Anda juga harus merujuk kembali ke artikel dasar-dasar objek JavaScript kami untuk informasi selengkapnya tentang notasi titik dan tanda kurung.

Memanggil fungsi tingkat atas

Terakhir, kita perlu memanggil fungsi top-level populate() kita:

populate();

Menyalin ke clipboard

Konversi antara objek dan teks

Contoh di atas sederhana dalam hal mengakses objek JavaScript, karena kami mengonversi respons jaringan secara langsung menjadi objek JavaScript menggunakan response.json().

Namun terkadang kami tidak seberuntung itu – terkadang kami menerima string JSON mentah, dan kami perlu mengkonversinya sendiri menjadi objek. Dan saat kita ingin mengirim objek JavaScript melalui jaringan, kita perlu mengkonversinya menjadi JSON (sebuah string) sebelum mengirimkannya. Untungnya, kedua masalah ini sangat umum dalam pengembangan web sehingga objek JSON bawaan tersedia di browser, yang berisi dua metode berikut:

parse(): Menerima string JSON sebagai parameter, dan mengembalikan objek JavaScript yang sesuai.

stringify(): Menerima objek sebagai parameter, dan mengembalikan string JSON yang setara.

Anda dapat melihat yang pertama beraksi dalam contoh heroes-finished-json-parse.html kami (lihat kode sumber) — ini melakukan hal yang persis sama dengan contoh yang kami buat sebelumnya, kecuali bahwa:

kami mengambil respons sebagai teks daripada JSON, dengan memanggil metode text() dari response

kami kemudian menggunakan parse() untuk mengonversi teks menjadi objek JavaScript.

Cuplikan kode utama ada di sini:

async function populate() {

  const requestURL = ‘https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json’;

  const request = new Request(requestURL);

  const response = await fetch(request);

  const superHeroesText = await response.text();

  const superHeroes = JSON.parse(superHeroesText);

  populateHeader(superHeroes);

  populateHeroes(superHeroes);

}

Seperti yang Anda duga, stringify() bekerja dengan cara sebaliknya. Coba masukkan baris berikut ke konsol JavaScript browser Anda satu per satu untuk melihatnya beraksi:

let myObj = { name: “Chris”, age: 38 };

myObj

let myString = JSON.stringify(myObj);

myString

Di sini kita membuat objek JavaScript, lalu memeriksa isinya, lalu mengkonversinya menjadi string JSON menggunakan stringify() – menyimpan nilai pengembalian dalam variabel baru – lalu memeriksanya lagi.

Uji keterampilan Anda!

Anda telah mencapai bagian akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? Anda dapat menemukan beberapa tes lebih lanjut untuk memverifikasi bahwa Anda telah menyimpan informasi ini sebelum melanjutkan – lihat Uji keterampilan Anda: JSON.

Ringkasan

Pada artikel ini, kami telah memberi Anda panduan sederhana untuk menggunakan JavaScript Object Notation (JSON) dalam program Anda, termasuk cara membuat dan mengurai JSON, dan cara mengakses data yang terkunci di dalamnya. Di artikel selanjutnya, kita akan mulai melihat JavaScript berorientasi objek.

Kamu ingin belajar mengenai pemograman seperti diatas? Yuk daftarkan dirimu di IDS College dengan mengambil jurusan Software Enginering (S1), kami tunggu ya!

Sumber: Menggunakan JavaScript Object Notation (JSON)