Cara mengambil data dan object dari JSON dengan Javascript

Key2design - JSON (JavaScript Object Notation) adalah format data yang sering digunakan untuk pertukaran data antar aplikasi. Dalam banyak kasus, data JSON disimpan di server dan dibutuhkan dalam aplikasi web untuk menampilkan informasi ke pengguna. Dalam artikel ini, kita akan membahas bagaimana cara mengambil semua data dan objek dari file JSON dan menampilkannya di HTML dengan JavaScript.

JavaScript memiliki metode fetch yang memungkinkan kita untuk mengambil data dari sumber eksternal, seperti file JSON. Setelah data diambil, kita dapat menggunakan JavaScript untuk membuat elemen HTML secara dinamis dan menampilkan data. Konsep ini dapat digunakan untuk menampilkan daftar item dari file JSON di halaman web.

Dalam artikel ini, kita akan menjelajahi proses ini secara detail dan membuat contoh aplikasi sederhana untuk menampilkan daftar item dari file JSON. Jika Anda ingin mempelajari bagaimana mengambil data dari JSON dan menampilkannya di HTML dengan JavaScript, baca terus artikel ini!

Untuk mengambil semua data dan objek dari file JSON dan menampilkannya di HTML, kita akan menggunakan metode fetch JavaScript untuk mengambil data JSON dari server, kemudian menggunakan JavaScript untuk membuat elemen HTML secara dinamis dan menampilkan data.

Berikut adalah langkah-langkah untuk mengambil semua data dan objek dari file JSON dan menampilkannya di HTML:

1. Ambil data JSON

Kita akan menggunakan metode fetch untuk mengambil data JSON dari file atau API. Contoh kode berikut menunjukkan bagaimana mengambil data JSON dari file data.json:

fetch('data.json')
  	.then(response => response.json())
  	.then(data => displayData(data))
  	.catch(error => console.error(error));

2. Tampilkan data

Setelah data JSON diambil, kita akan memanggil fungsi displayData untuk menampilkan data di HTML. Fungsi ini akan membuat elemen HTML secara dinamis dan menampilkan data. Berikut adalah contoh kode untuk menampilkan data:

function displayData(data) {
      var container = document.getElementById('container');
      for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var itemContainer = document.createElement('div');
        for (var key in item) {
          var value = item[key];
          if (typeof value === 'object') {
            var subContainer = document.createElement('div');
            for (var subKey in value) {
              var subValue = value[subKey];
              var subValueElement = document.createElement('p');
              subValueElement.innerHTML = subKey + ': ' + subValue;
              subContainer.appendChild(subValueElement);
            }
            itemContainer.appendChild(subContainer);
          } else {
            var valueElement = document.createElement('p');
            valueElement.innerHTML = key + ': ' + value;
            itemContainer.appendChild(valueElement);
          }
        }
        container.appendChild(itemContainer);
      }
    }
    

3. Tambahkan kontainer HTML

Terakhir, kita akan menambahkan kontainer HTML untuk menampilkan data. Berikut adalah contoh kode HTML:

<div id="container"></div>

Itu saja! Setelah langkah-langkah ini diikuti, semua data dan objek dari file JSON akan ditampilkan di HTML. Dengan menggunakan metode fetch dan JavaScript untuk membuat elemen HTML secara dinamis, kita dapat menampilkan data JSON dalam aplikasi web dengan mudah.