CARA MENGAMBIL DATA JSON DI JAVASCRIPT

Pada era digital ini, hampir semua aplikasi web menggunakan JavaScript untuk mengambil data JSON karena lebih ringan dan mudah dipahami. JSON atau JavaScript Object Notation adalah format ringan untuk pertukaran data, yang mudah dibaca dan ditulis oleh manusia, serta mudah diurai dan dibuat (generate) oleh mesin. Di dalam artikel ini, kita akan membahas cara mengambil data JSON di JavaScript dengan mudah.

Apa itu JSON?

JSON adalah format teks yang digunakan untuk menyimpan dan mengangkut data. JSON sering digunakan saat data disimpan (atau diambil) dari server, dan digunakan sebagai alternatif dari XML.

Mengambil Data JSON

Untuk mengambil data JSON di JavaScript, kita dapat menggunakan berbagai metode. Beberapa di antaranya adalah:

Menggunakan fetch()

Fetch API menyediakan antarmuka untuk mengambil sumber daya (termasuk data JSON) melalui HTTP atau HTTPS. Berikut adalah contoh penggunaan fetch():

fetch('https://api.example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Menggunakan XMLHttpRequest

XMLHttpRequest adalah objek built-in yang dimiliki oleh browser web yang dapat digunakan untuk merima dan mengirim data dari server. Meski namanya memiliki XML, ini bisa juga digunakan untuk data JSON. Contoh penggunaan XMLHttpRequest adalah sebagai berikut:

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data.json', true);
xhr.responseType = 'json';

xhr.onload = function() {
  let status = xhr.status;
  if (status === 200) {
    console.log(xhr.response);
  } else {
    console.error('Error:', status);
  }
};

xhr.send();

Menggunakan axios

Axios adalah library Javascript yang dapat digunakan untuk melakukan HTTP request, baik di browser maupun di Node.js. Berikut contoh penggunaan axios untuk mengambil data JSON:

axios.get('https://api.example.com/data.json')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Sekarang kamu telah mengetahui bagaimana cara mengambil data JSON di Javascript. Dengan memahami konsep ini, kamu dapat membuat aplikasi JavaScript yang lebih dinamis dan interaktif dengan mengambil data dari server dalam format JSON. Selamat mencoba!