Cara Menggunakan JSON untuk Pertukaran Data antara Website dan Aplikasi Web

Website dan aplikasi web sering membutuhkan cara untuk saling mengirim informasi, misalnya ketika pengguna mengisi formulir, masuk ke akun, mencari produk, atau menyimpan pesanan. Salah satu format yang banyak digunakan untuk kebutuhan tersebut adalah JSON.

Cara menggunakan JSON untuk pertukaran data antara website dan aplikasi web penting dipahami oleh pengembang yang membangun layanan berbasis web. Format ini membantu browser, server, dan aplikasi berkomunikasi menggunakan struktur data yang mudah dibaca sekaligus diproses oleh program.

JSON tidak bekerja sendirian. Dalam penerapannya, format ini biasanya digunakan bersama JavaScript, HTTP, Fetch API, dan REST API agar data dapat dikirim, diterima, serta disimpan oleh sistem tujuan.

Melalui pembahasan berikut, Anda akan mempelajari struktur JSON, cara membuat objek data, mengirimkannya dari website, membaca respons server, hingga menghubungkannya dengan API. Contoh kode disusun secara bertahap agar bisa dipahami dan diterapkan dalam proyek sederhana.

Pengertian JSON dan Perannya dalam Komunikasi antara Website dan Aplikasi Web

JSON merupakan singkatan dari JavaScript Object Notation, yaitu format pertukaran data berbasis teks yang digunakan untuk menyimpan dan mengirim informasi. Format ini memiliki struktur sederhana sehingga dapat dibaca manusia sekaligus diproses oleh berbagai bahasa pemrograman.

Walaupun namanya berasal dari JavaScript, JSON tidak hanya digunakan dalam ekosistem JavaScript. Bahasa seperti Python, PHP, Java, Go, dan C# juga dapat membaca maupun menghasilkan data JSON.

Dalam komunikasi website, JSON biasanya menjadi perantara antara bagian frontend dan backend. Frontend merupakan bagian yang berinteraksi langsung dengan pengguna, sedangkan backend menangani proses di server, seperti autentikasi, pengolahan data, dan komunikasi dengan database.

Mengapa JSON banyak digunakan?

Salah satu alasan JSON populer adalah strukturnya ringkas dan tidak membutuhkan format penulisan yang rumit. Data dapat disusun dalam pasangan nama properti dan nilai sehingga informasi mudah dikelompokkan.

Selain itu, JSON didukung secara luas oleh browser modern dan berbagai teknologi server. Pengembang tidak perlu membuat format komunikasi khusus ketika ingin mengirim informasi dari website ke aplikasi lain.

Berikut beberapa keunggulan JSON dalam pengembangan web:

Mudah dibaca: struktur data menggunakan pasangan properti dan nilai yang cukup jelas.
Ringan: format teksnya relatif ringkas sehingga cocok untuk komunikasi melalui jaringan.
Lintas bahasa pemrograman: dapat diproses oleh berbagai bahasa dan platform.
Mudah diintegrasikan: banyak REST API menggunakan JSON sebagai format request dan response.
Mendukung data bertingkat: objek dan array dapat digabungkan untuk menyimpan informasi yang lebih kompleks.

JSON juga cocok digunakan pada aplikasi yang membutuhkan pembaruan data tanpa memuat ulang seluruh halaman. Contohnya, daftar produk dapat diperbarui setelah pengguna memilih kategori tertentu.

Bagaimana JSON bekerja dalam komunikasi website?

Secara umum, proses pertukaran data dimulai ketika pengguna melakukan tindakan pada website. Browser kemudian menyiapkan informasi dalam bentuk JSON dan mengirimkannya melalui HTTP request ke server atau endpoint API.

Server menerima data tersebut, memeriksa isinya, lalu menjalankan proses yang diperlukan. Setelah selesai, server dapat mengirimkan respons dalam format JSON yang kemudian dibaca oleh JavaScript di browser.

ALUR PERTUKARAN DATA

Website / Frontend

Pengguna mengisi formulir atau memilih menu

HTTP Request · JSON

Server / Backend

Memvalidasi dan memproses data

HTTP Response · JSON

Website menerima respons

JavaScript membaca dan menampilkan hasil

Sebagai contoh, pengguna mengirim formulir pendaftaran berisi nama dan alamat email. Website mengubah informasi tersebut menjadi JSON, kemudian mengirimkannya ke server untuk diperiksa dan disimpan.

Jika pendaftaran berhasil, server dapat mengembalikan respons seperti status berhasil dan nomor identitas pengguna. Website kemudian menampilkan pemberitahuan tanpa harus memuat ulang halaman secara keseluruhan.

Perbedaan JSON dengan JavaScript Object

JSON dan objek JavaScript terlihat mirip, tetapi keduanya bukan hal yang sama. JSON merupakan format teks dengan aturan penulisan tertentu, sedangkan objek JavaScript merupakan struktur data yang digunakan langsung oleh program.

Perbedaan ini penting karena data yang dikirim melalui HTTP umumnya berbentuk teks JSON. Sebelum digunakan sebagai objek JavaScript, teks tersebut perlu diproses menggunakan JSON.parse() atau metode response.json().

Aspek	JSON	JavaScript Object
Bentuk	Teks	Struktur data dalam JavaScript
Nama properti	Menggunakan tanda kutip ganda	Bisa menggunakan tanda kutip atau tanpa kutip
String	Wajib menggunakan tanda kutip ganda	Mengikuti aturan JavaScript
Fungsi	Pertukaran dan penyimpanan data	Pengolahan data dalam program
Konversi	`JSON.stringify()`	Dapat diubah menjadi JSON

Contohnya, objek JavaScript dapat memiliki properti berupa fungsi atau nilai undefined. Nilai tersebut bukan bagian dari format JSON sehingga tidak dapat direpresentasikan secara langsung dalam hasil serialisasi.

Struktur JSON yang Perlu Dipahami Sebelum Melakukan Pertukaran Data

Sebelum mengirim informasi dari website ke aplikasi web, pengembang perlu memahami bentuk data yang digunakan. Kesalahan struktur dapat menyebabkan server gagal membaca informasi meskipun request berhasil dikirim.

JSON memiliki aturan penulisan yang cukup ketat. Setiap tanda kurung, koma, titik dua, dan tanda kutip harus ditempatkan dengan benar agar data dapat diproses.

1. Object sebagai wadah data

Object merupakan struktur JSON yang menggunakan tanda kurung kurawal {}. Di dalamnya terdapat pasangan properti dan nilai yang dipisahkan menggunakan tanda titik dua.

Contoh JSON object untuk menyimpan informasi pengguna:

{
  "nama": "Andi",
  "email": "andi@example.com",
  "umur": 25,
  "status": "aktif"
}

Pada contoh tersebut, nama, email, umur, dan status merupakan properti. Sementara itu, nilai di sebelah kanan masing-masing properti berisi informasi yang akan digunakan aplikasi.

Setiap properti dipisahkan dengan koma, kecuali properti terakhir. Jika tanda koma atau tanda kutip tidak sesuai aturan, JSON dapat dianggap tidak valid.

2. Array untuk menyimpan banyak data

Array digunakan ketika satu bagian data perlu menampung beberapa nilai sekaligus. Struktur ini menggunakan tanda kurung siku [] dan dapat berisi string, angka, object, maupun tipe data lain yang diizinkan JSON.

Contoh daftar pengguna dalam format JSON:

{
  "pengguna": [
    {
      "id": 1,
      "nama": "Andi"
    },
    {
      "id": 2,
      "nama": "Budi"
    },
    {
      "id": 3,
      "nama": "Citra"
    }
  ]
}

Struktur tersebut cocok digunakan untuk mengirim daftar produk, pengguna, artikel, atau transaksi. Website dapat membaca array tersebut kemudian menampilkan setiap item menggunakan perulangan JavaScript.

3. Jenis nilai yang didukung JSON

JSON memiliki beberapa tipe nilai dasar yang perlu dipahami sebelum membuat data. Pemilihan tipe yang tepat membantu aplikasi membaca informasi sesuai kebutuhan.

Tipe data	Contoh	Keterangan
String	`"nama": "Andi"`	Menyimpan teks
Number	`"harga": 25000`	Menyimpan angka
Boolean	`"aktif": true`	Menyimpan nilai benar atau salah
Object	`"alamat": {"kota": "Bandung"}`	Menyimpan data bertingkat
Array	`"produk": ["Buku", "Pensil"]`	Menyimpan kumpulan nilai
Null	`"telepon": null`	Menandakan nilai kosong

Perhatikan bahwa JSON tidak mendukung tipe data seperti undefined, fungsi, atau komentar. Jika aplikasi membutuhkan informasi kosong, gunakan null sesuai kesepakatan struktur data.

4. Object bertingkat untuk data yang lebih kompleks

Dalam aplikasi web, satu informasi sering memiliki beberapa kelompok data. Misalnya, profil pengguna memiliki identitas, alamat, serta informasi akun yang perlu dipisahkan.

JSON dapat menyimpan struktur bertingkat melalui object di dalam object. Cara ini membuat data lebih terorganisasi dan memudahkan pengembang mengakses bagian tertentu.

Contohnya:

{
  "id": 101,
  "profil": {
    "nama": "Andi",
    "email": "andi@example.com"
  },
  "alamat": {
    "jalan": "Jalan Melati",
    "kota": "Bandung",
    "kode_pos": "40123"
  },
  "akun_aktif": true
}

Untuk mengambil nama pengguna dari objek tersebut, JavaScript dapat menggunakan data.profil.nama. Sementara itu, informasi kota dapat diakses melalui data.alamat.kota.

5. Aturan penting agar JSON valid

JSON yang tidak valid dapat membuat proses parsing gagal. Karena itu, sebelum mengirim data ke server, periksa kembali formatnya.

Beberapa aturan yang perlu diperhatikan:

Nama properti harus menggunakan tanda kutip ganda.
Nilai string harus menggunakan tanda kutip ganda.
Pasangan properti dan nilai dipisahkan dengan titik dua.
Setiap properti dipisahkan dengan koma.
Tidak boleh ada koma tambahan setelah properti terakhir.
Komentar tidak diperbolehkan di dalam JSON standar.
Nilai angka tidak boleh ditulis menggunakan tanda kutip jika ingin diproses sebagai angka.

Untuk memeriksa struktur, pengembang dapat menggunakan JSON.parse() di JavaScript. Jika format tidak valid, browser akan menghasilkan error yang dapat digunakan untuk menemukan bagian penulisan yang bermasalah.

Cara Membuat dan Mengirim Data JSON dari Website ke Aplikasi Web

Setelah memahami strukturnya, langkah berikutnya adalah membuat data JSON dari informasi yang tersedia di website. Proses ini biasanya dilakukan menggunakan JavaScript sebelum data dikirim melalui HTTP request.

Contoh penerapannya dapat ditemukan pada formulir pendaftaran, halaman login, pemesanan produk, dan pengiriman komentar. Setiap input pengguna dikumpulkan terlebih dahulu, kemudian disusun menjadi object sebelum dikonversi menjadi JSON.

1. Siapkan formulir pada halaman website

Pertama, buat formulir sederhana yang memungkinkan pengguna memasukkan nama dan email. Formulir ini akan menjadi sumber data yang dikirim ke aplikasi web.

Contoh HTML:

<form id="formPengguna">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" required>

  <label for="email">Email:</label>
  <input type="email" id="email" required>

  <button type="submit">Kirim Data</button>
</form>

Atribut required membantu browser memeriksa agar kolom tidak dibiarkan kosong. Sementara itu, type="email" memberikan validasi format email dasar sebelum formulir diproses.

2. Ambil nilai input menggunakan JavaScript

Setelah formulir tersedia, gunakan JavaScript untuk membaca informasi yang dimasukkan pengguna. Proses ini dilakukan ketika formulir dikirim agar data dapat dikumpulkan dalam satu object.

const form = document.getElementById("formPengguna");

form.addEventListener("submit", function(event) {
  event.preventDefault();

  const nama = document.getElementById("nama").value;
  const email = document.getElementById("email").value;

  const dataPengguna = {
    nama: nama,
    email: email
  };

  console.log(dataPengguna);
});

Metode preventDefault() mencegah browser memuat ulang halaman ketika formulir dikirim. Dengan begitu, JavaScript dapat menjalankan proses pengiriman data secara mandiri.

Pada tahap ini, dataPengguna masih berupa object JavaScript. Agar dapat dikirim sebagai isi request JSON, object tersebut perlu dikonversi menjadi teks.

3. Ubah object menjadi JSON menggunakan JSON.stringify()

Gunakan metode JSON.stringify() untuk mengubah object JavaScript menjadi string JSON. Hasilnya dapat ditempatkan pada bagian body HTTP request.

const dataPengguna = {
  nama: "Andi",
  email: "andi@example.com"
};

const jsonData = JSON.stringify(dataPengguna);

console.log(jsonData);

Hasilnya:

{"nama":"Andi","email":"andi@example.com"}

Perlu dibedakan antara object JavaScript dan hasil JSON.stringify(). Object digunakan untuk mengolah informasi dalam program, sedangkan string JSON digunakan sebagai representasi teks ketika data dikirim melalui jaringan.

4. Kirim data menggunakan HTTP POST

Untuk mengirim data ke aplikasi web, gunakan metode HTTP POST melalui endpoint yang disediakan server. Metode ini umum digunakan ketika website ingin membuat data baru atau mengirim informasi untuk diproses.

Contoh kode menggunakan Fetch API:

const dataPengguna = {
  nama: "Andi",
  email: "andi@example.com"
};

fetch("https://api.contoh.com/pengguna", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(dataPengguna)
})
.then(response => {
  if (!response.ok) {
    throw new Error("Gagal mengirim data");
  }

  return response.json();
})
.then(data => {
  console.log("Respons server:", data);
})
.catch(error => {
  console.error("Terjadi kesalahan:", error);
});

Alamat https://api.contoh.com/pengguna hanya contoh dan harus diganti dengan endpoint API milik aplikasi tujuan. Endpoint adalah alamat yang digunakan untuk mengakses fungsi atau sumber daya tertentu pada server.

Header Content-Type: application/json memberi tahu server bahwa isi request menggunakan format JSON. Sementara itu, body berisi data yang sudah dikonversi menggunakan JSON.stringify().

5. Periksa respons setelah pengiriman

Pengiriman request tidak selalu berarti data berhasil disimpan. Server bisa menolak permintaan karena validasi gagal, pengguna tidak memiliki izin, atau terjadi masalah pada layanan backend.

Karena itu, periksa status HTTP melalui response.ok sebelum membaca isi respons. Jika server mengirimkan pesan kesalahan, tampilkan informasi yang sesuai agar pengguna mengetahui apa yang perlu diperbaiki.

Sebagai contoh, respons berhasil dapat berbentuk seperti berikut:

{
  "status": "success",
  "message": "Data pengguna berhasil disimpan",
  "user_id": 101
}

Website dapat membaca properti message untuk menampilkan pemberitahuan. Properti user_id juga bisa digunakan ketika aplikasi membutuhkan identitas pengguna pada proses berikutnya.

Catatan keamanan: jangan mengirim password, token rahasia, atau informasi sensitif melalui URL. Gunakan HTTPS, validasi input di server, dan mekanisme autentikasi yang sesuai dengan kebutuhan aplikasi.

Mengolah JSON Menggunakan JavaScript melalui Metode Fetch API

Fetch API merupakan fitur JavaScript modern yang digunakan untuk melakukan HTTP request ke server. Dengan metode ini, website dapat mengambil atau mengirim data tanpa harus memuat ulang seluruh halaman.

Fetch API menggunakan konsep Promise, yaitu mekanisme untuk menangani proses yang hasilnya baru tersedia setelah operasi selesai. Karena komunikasi jaringan membutuhkan waktu, JavaScript perlu menunggu respons sebelum mengolah data yang diterima.

1. Mengambil data JSON menggunakan GET

Metode GET digunakan untuk meminta data dari server. Contohnya, website ingin mengambil daftar produk yang tersedia pada aplikasi web.

fetch("https://api.contoh.com/produk")
  .then(response => {
    if (!response.ok) {
      throw new Error("Gagal mengambil data");
    }

    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("Error:", error);
  });

Pada contoh tersebut, fetch() mengirim request ke endpoint produk. Setelah server memberikan respons, response.json() membaca isi respons dan mengubah JSON menjadi object atau array JavaScript.

Pengecekan response.ok diperlukan karena Fetch API tidak otomatis menganggap seluruh status HTTP seperti 404 atau 500 sebagai Promise yang gagal. Tanpa pemeriksaan ini, kode bisa tetap mencoba membaca respons meskipun server memberikan status kesalahan.

2. Mengolah data JSON dengan async dan await

Selain menggunakan .then(), Fetch API dapat ditulis menggunakan async dan await. Bentuk ini sering lebih mudah dibaca ketika aplikasi memiliki beberapa proses yang harus dijalankan secara berurutan.

async function ambilProduk() {
  try {
    const response = await fetch(
      "https://api.contoh.com/produk"
    );

    if (!response.ok) {
      throw new Error("Gagal mengambil data produk");
    }

    const data = await response.json();

    console.log(data);
  } catch (error) {
    console.error("Terjadi kesalahan:", error);
  }
}

ambilProduk();

Kata await membuat fungsi menunggu sampai proses request atau pembacaan respons selesai. Sementara itu, blok try...catch menangani error agar kegagalan jaringan tidak membuat aplikasi berhenti tanpa penanganan.

Pendekatan ini berguna untuk halaman dashboard, daftar transaksi, profil pengguna, dan tampilan yang membutuhkan data dari server. Pengembang juga dapat menambahkan indikator loading ketika proses pengambilan data berlangsung.

3. Menampilkan data JSON ke halaman website

Data yang berhasil diambil biasanya perlu ditampilkan kepada pengguna. Misalnya, aplikasi mengambil daftar produk yang berisi nama dan harga, kemudian menampilkannya dalam bentuk daftar HTML.

Contoh struktur respons API:

[
  {
    "id": 1,
    "nama": "Keyboard",
    "harga": 150000
  },
  {
    "id": 2,
    "nama": "Mouse",
    "harga": 75000
  }
]

Contoh HTML:

<div id="daftarProduk"></div>

JavaScript untuk menampilkan data:

async function tampilkanProduk() {
  const container = document.getElementById("daftarProduk");

  try {
    const response = await fetch(
      "https://api.contoh.com/produk"
    );

    if (!response.ok) {
      throw new Error("Data produk tidak tersedia");
    }

    const produk = await response.json();

    container.replaceChildren();

    produk.forEach(item => {
      const elemen = document.createElement("p");

      elemen.textContent =
        `${item.nama} - Rp${item.harga.toLocaleString("id-ID")}`;

      container.appendChild(elemen);
    });
  } catch (error) {
    container.textContent = "Gagal memuat daftar produk.";
    console.error(error);
  }
}

tampilkanProduk();

Kode tersebut membuat elemen HTML untuk setiap produk yang diterima. Penggunaan textContent juga lebih aman untuk menampilkan teks dari API dibandingkan memasukkan data mentah menggunakan innerHTML.

4. Menangani loading, error, dan data kosong

Dalam aplikasi nyata, respons API tidak selalu datang dengan cepat. Website sebaiknya memberikan informasi ketika data sedang dimuat agar pengguna tidak mengira halaman mengalami kerusakan.

Selain itu, tangani kondisi ketika server mengembalikan array kosong. Hal ini dapat terjadi ketika belum ada produk, transaksi, atau pengguna yang tersimpan.

Beberapa kondisi yang perlu ditangani:

Kondisi	Penanganan
Request sedang berjalan	Tampilkan pesan loading
Respons berhasil	Tampilkan data
Data kosong	Tampilkan pemberitahuan bahwa belum ada data
Koneksi gagal	Berikan pesan gangguan jaringan
Status HTTP 404	Periksa endpoint atau sumber daya
Status HTTP 500	Periksa gangguan pada server

5. Mengatasi kesalahan saat memproses JSON

Salah satu masalah yang sering terjadi adalah respons server bukan JSON yang valid. Misalnya, server mengembalikan halaman HTML berisi pesan error, tetapi JavaScript tetap mencoba membacanya menggunakan response.json().

Akibatnya, browser dapat menampilkan error parsing seperti Unexpected token. Untuk memeriksanya, lihat tab Network pada Developer Tools dan periksa isi respons yang diterima.

Langkah pemeriksaan yang bisa dilakukan:

Buka Developer Tools dengan menekan F12.
Pilih tab Network.
Jalankan kembali proses yang memanggil API.
Klik request yang bermasalah.
Periksa bagian Headers untuk melihat status HTTP dan tipe konten.
Buka tab Response untuk memeriksa isi data yang dikirim server.

Jika respons ternyata HTML, periksa apakah endpoint benar atau server sedang mengalami gangguan. Jika respons JSON tetapi strukturnya berbeda dari perkiraan, sesuaikan kode JavaScript dengan properti yang benar.

Cara Menghubungkan JSON dengan REST API untuk Mengambil dan Menyimpan Data

REST API merupakan pendekatan komunikasi antarsistem yang menggunakan HTTP untuk mengakses sumber daya. Dalam penerapannya, JSON sering digunakan sebagai format data request dan response karena mudah diproses oleh berbagai bahasa pemrograman.

Melalui REST API, website dapat mengambil informasi dari server, membuat data baru, memperbarui informasi, atau menghapus data tertentu. Setiap operasi biasanya menggunakan metode HTTP yang sesuai dengan kebutuhan.

Mengenal metode HTTP yang umum digunakan

Sebelum menghubungkan JSON dengan REST API, pahami beberapa metode HTTP yang sering digunakan. Pemilihan metode yang tepat membantu server mengetahui tindakan yang diminta oleh website.

Metode	Fungsi	Contoh penggunaan
GET	Mengambil data	Melihat daftar produk
POST	Membuat atau mengirim data	Menambahkan pengguna
PUT	Mengganti seluruh representasi data	Memperbarui profil lengkap
PATCH	Memperbarui sebagian data	Mengubah alamat email
DELETE	Menghapus data	Menghapus produk

Perilaku setiap endpoint tetap bergantung pada rancangan API yang digunakan. Karena itu, dokumentasi API perlu diperiksa sebelum mengirim request, terutama jika server memiliki aturan autentikasi atau format payload tertentu.

1. Mengambil data dari REST API menggunakan GET

Misalnya, sebuah aplikasi memiliki endpoint untuk mengambil informasi artikel. Website dapat mengirim request GET kemudian membaca respons JSON yang dikembalikan server.

async function ambilArtikel() {
  try {
    const response = await fetch(
      "https://api.contoh.com/artikel"
    );

    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }

    const artikel = await response.json();

    console.log(artikel);
  } catch (error) {
    console.error("Gagal mengambil artikel:", error);
  }
}

ambilArtikel();

Jika API mengembalikan daftar artikel, data tersebut dapat digunakan untuk membuat halaman berita atau blog secara dinamis. Website tidak perlu menyimpan seluruh informasi artikel secara langsung di dalam file HTML.

2. Menyimpan data baru menggunakan POST

Metode POST digunakan ketika website ingin mengirim informasi baru ke server. Contohnya, pengguna mengisi formulir untuk menambahkan artikel ke dalam sistem pengelolaan konten.

async function simpanArtikel() {
  const artikel = {
    judul: "Belajar JSON untuk Website",
    penulis: "Andi",
    kategori: "Teknologi"
  };

  try {
    const response = await fetch(
      "https://api.contoh.com/artikel",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(artikel)
      }
    );

    if (!response.ok) {
      throw new Error("Artikel gagal disimpan");
    }

    const hasil = await response.json();

    console.log("Artikel tersimpan:", hasil);
  } catch (error) {
    console.error(error);
  }
}

simpanArtikel();

Server akan menerima payload JSON dan memeriksa data sebelum menyimpannya. Jika berhasil, respons biasanya berisi informasi artikel yang baru dibuat atau identitas data tersebut.

3. Memperbarui data menggunakan PUT dan PATCH

PUT dan PATCH sama-sama digunakan untuk memperbarui data, tetapi cara penggunaannya dapat berbeda. PUT umumnya digunakan untuk mengganti representasi sumber daya secara keseluruhan, sedangkan PATCH digunakan untuk mengubah sebagian properti.

Contoh memperbarui data menggunakan PATCH:

async function ubahEmail() {
  const perubahan = {
    email: "andi.baru@example.com"
  };

  const response = await fetch(
    "https://api.contoh.com/pengguna/101",
    {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(perubahan)
    }
  );

  if (!response.ok) {
    throw new Error("Gagal memperbarui email");
  }

  const hasil = await response.json();

  console.log(hasil);
}

Pada contoh tersebut, hanya properti email yang dikirim. Server kemudian memperbarui informasi sesuai aturan yang diterapkan pada endpoint.

4. Menghapus data menggunakan DELETE

Ketika pengguna menghapus artikel atau produk, website dapat mengirim request DELETE ke endpoint yang sesuai. Identitas data biasanya ditempatkan pada bagian URL agar server mengetahui sumber daya yang akan dihapus.

async function hapusArtikel(id) {
  const response = await fetch(
    `https://api.contoh.com/artikel/${id}`,
    {
      method: "DELETE"
    }
  );

  if (!response.ok) {
    throw new Error("Artikel gagal dihapus");
  }

  console.log("Artikel berhasil dihapus");
}

hapusArtikel(101);

Sebelum mengirim permintaan penghapusan, aplikasi sebaiknya meminta konfirmasi pengguna. Tindakan DELETE dapat bersifat permanen apabila server tidak menyediakan fitur pemulihan data.

5. Menggunakan token autentikasi pada REST API

Tidak semua endpoint dapat diakses secara bebas. API yang menangani informasi akun, transaksi, atau data pribadi biasanya membutuhkan autentikasi untuk memastikan bahwa request berasal dari pengguna yang memiliki izin.

Salah satu mekanisme yang umum digunakan adalah token akses. Token dikirim melalui header Authorization, bukan ditempatkan sembarangan di URL.

const response = await fetch(
  "https://api.contoh.com/profil",
  {
    method: "GET",
    headers: {
      "Authorization": `Bearer ${accessToken}`,
      "Accept": "application/json"
    }
  }
);

if (!response.ok) {
  throw new Error("Tidak dapat mengambil profil");
}

const profil = await response.json();

Variabel accessToken pada contoh harus diperoleh melalui proses autentikasi yang sah. Jangan menuliskan token rahasia secara langsung pada kode frontend yang dapat dilihat pengunjung.

Untuk aplikasi produksi, pengelolaan token perlu mempertimbangkan risiko pencurian melalui XSS, masa berlaku token, serta mekanisme pembaruan akses. Gunakan HTTPS dan ikuti panduan keamanan dari penyedia API.

6. Mengatasi masalah CORS saat menghubungkan website dengan API

CORS atau Cross-Origin Resource Sharing merupakan mekanisme keamanan browser yang mengatur permintaan lintas origin. Masalah ini dapat muncul ketika website dan API menggunakan domain, protokol, atau port yang berbeda.

Contohnya, website berjalan pada https://website.com, sedangkan API berada di https://api.website-lain.com. Browser dapat memblokir akses apabila server API tidak memberikan header CORS yang sesuai.

Solusi utamanya bukan menghilangkan keamanan browser melalui pengaturan sembarangan. Server API harus mengizinkan origin yang memang berhak mengakses layanan tersebut.

Jika Anda mengelola backend, atur konfigurasi CORS pada server. Jika API berasal dari penyedia pihak ketiga, periksa dokumentasinya atau gunakan backend perantara apabila memang diizinkan oleh ketentuan layanan.

Kesalahan yang sering dilakukan pengembang: menganggap setiap kegagalan Fetch API disebabkan oleh JSON yang salah. Padahal, masalah dapat berasal dari endpoint, autentikasi, jaringan, format respons, atau kebijakan CORS.

FAQ Seputar Cara Menggunakan JSON untuk Pertukaran Data Website dan Aplikasi Web

1. Apa fungsi JSON dalam pertukaran data website dan aplikasi web?

JSON berfungsi sebagai format untuk menyusun dan mengirim informasi antara website, server, serta aplikasi lain. Struktur teksnya memudahkan berbagai bahasa pemrograman membaca data yang sama.

Format ini sering digunakan untuk mengirim data formulir, mengambil daftar produk, memproses transaksi, dan berkomunikasi melalui REST API. Dengan JSON, sistem tidak perlu menggunakan format komunikasi khusus untuk setiap bahasa pemrograman.

2. Apakah JSON hanya bisa digunakan dengan JavaScript?

Tidak. JSON dapat digunakan oleh berbagai bahasa pemrograman seperti PHP, Python, Java, C#, dan Go.

Nama JSON memang berasal dari JavaScript, tetapi formatnya sudah menjadi standar pertukaran data yang didukung banyak teknologi. Karena itu, aplikasi berbasis bahasa berbeda tetap dapat saling berkomunikasi menggunakan JSON.

3. Apa perbedaan JSON.parse() dan JSON.stringify()?

JSON.parse() digunakan untuk mengubah teks JSON menjadi object atau array JavaScript. Metode ini biasanya digunakan ketika aplikasi menerima data JSON dalam bentuk string.

Sementara itu, JSON.stringify() mengubah object atau array JavaScript menjadi string JSON. Metode tersebut sering digunakan sebelum data ditempatkan pada body HTTP request.

4. Mengapa website tidak bisa membaca respons JSON dari API?

Penyebabnya bisa berupa respons server yang bukan JSON valid, endpoint yang salah, gangguan jaringan, atau server mengembalikan halaman HTML berisi pesan kesalahan. Kesalahan format data juga dapat membuat proses parsing gagal.

Periksa status HTTP dan isi respons melalui Developer Tools pada tab Network. Pastikan server mengirimkan data yang sesuai dengan format yang diharapkan oleh kode JavaScript.

5. Apakah Fetch API harus menggunakan JSON?

Tidak. Fetch API dapat digunakan untuk mengambil dan mengirim berbagai jenis data, termasuk teks, gambar, file, dan formulir.

Namun, JSON banyak dipilih ketika website perlu bertukar informasi terstruktur dengan REST API. Format yang digunakan tetap harus mengikuti ketentuan endpoint yang dituju.

6. Apa fungsi Content-Type application/json?

Header Content-Type: application/json memberi tahu server bahwa isi request menggunakan format JSON. Informasi ini membantu backend menentukan cara membaca dan memproses payload yang dikirim.

Jika header tidak sesuai, server mungkin gagal memproses data atau menganggap isi request menggunakan format lain. Karena itu, sesuaikan header dengan dokumentasi API.

7. Mengapa harus menggunakan JSON.stringify() sebelum mengirim data?

Karena object JavaScript bukan teks JSON yang dapat langsung dikirim sebagai payload sesuai format yang diharapkan banyak API. JSON.stringify() mengubah object tersebut menjadi string JSON.

Tanpa konversi yang tepat, server mungkin tidak dapat membaca properti yang dikirim. Namun, ikuti dokumentasi endpoint karena tidak semua API menggunakan JSON sebagai format request.

8. Apakah JSON aman digunakan untuk mengirim data pribadi?

JSON hanyalah format data, bukan mekanisme keamanan. Keamanan informasi tetap bergantung pada enkripsi koneksi, autentikasi, otorisasi, validasi input, dan pengelolaan data di server.

Gunakan HTTPS dan jangan menempatkan password atau token rahasia pada URL. Server juga harus memeriksa data yang diterima karena informasi dari browser tidak boleh langsung dipercaya.

Kesimpulan

JSON menjadi salah satu format penting dalam komunikasi antara website dan aplikasi web karena strukturnya sederhana, ringan, serta didukung berbagai bahasa pemrograman. Format ini memungkinkan frontend dan backend bertukar informasi tanpa harus menggunakan struktur data yang berbeda.

Untuk menerapkannya, pahami object, array, tipe nilai, serta aturan penulisan JSON. Setelah itu, gunakan JSON.stringify() untuk menyiapkan data yang akan dikirim dan Fetch API untuk menjalankan HTTP request.

Ketika berkomunikasi dengan REST API, sesuaikan metode GET, POST, PUT, PATCH, atau DELETE dengan kebutuhan endpoint. Periksa respons server, tangani error, dan pastikan autentikasi serta konfigurasi keamanan sudah diterapkan dengan benar.

Dengan memahami alur tersebut, Anda dapat membangun fitur website yang mengambil, mengirim, memperbarui, dan mengolah data secara lebih terstruktur. JSON bukan hanya membantu komunikasi antarsistem, tetapi juga memudahkan pengembangan aplikasi web yang terintegrasi.