Dapat json digunakan dalam html?

Dalam tutorial ini, saya akan menunjukkan cara mengambil dan menampilkan data dari file JSON menggunakan vanilla JavaScript

Nội dung chính Show

Mengambil data JSON
Menampilkan data JSON
Mengapa menggunakan JavaScript Vanila?
Bisakah saya memasukkan JSON ke dalam HTML?
Bagaimana cara menampilkan data file JSON dalam HTML?
Bagaimana cara mengikat data JSON dalam HTML?

Jadi bagaimana kita akan mencapai ini?

Pertama, kita akan mengambil data JSON dengan menggunakan API pengambilan. Ini akan mengembalikan janji dengan data JSON kami. Kemudian kita akan menambahkan data secara dinamis dengan membuat elemen HTML dengan cepat. Kami kemudian akan menambahkan data JSON kami ke elemen tersebut

Mendapatkan data JSON dari API dan menampilkannya di halaman web adalah hal umum yang akan sering Anda lakukan. Saya telah membuat postingan serupa di framework besar seperti React, Vue, dan Angular. Lihat apakah Anda menggunakan salah satu dari kerangka kerja itu

Mari kita mulai

Pertama, buat file

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

_1 dan isi dengan data berikut

[
    {
        "id": "1",
        "firstName": "John",
        "lastName": "Doe"
    },
    {
        "id": "2",
        "firstName": "Mary",
        "lastName": "Peterson"
    },
    {
        "id": "3",
        "firstName": "George",
        "lastName": "Hansen"
    }
]

Kami akan menyimpan file ini di direktori yang sama dengan file

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

2 kami

Daftar isi

Mengambil data JSON

Untuk dapat menampilkan data ini dalam file HTML, pertama-tama kita perlu mengambil data dengan JavaScript

Kami akan mengambil data ini dengan menggunakan API pengambilan. Kami menggunakan

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

_3 dengan cara berikut

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

The

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

4parameter yang digunakan dalam

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

5fungsiadalah tempat kita mendapatkan data JSON. Ini sering berupa alamat http. Dalam kasus kami ini hanya namafile

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

1. Kami tidak perlu menelusuri direktori apa pun karena file json berada di direktori yang sama dengan

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

2 kami

Fungsi

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

5 akan mengembalikan janji. Saat data JSON diambil dari file, fungsi

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

9 akan dijalankan dengan data JSON sebagai respons

Jika terjadi kesalahan (seperti file JSON tidak dapat ditemukan), fungsi

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

0 akan dijalankan

Mari kita lihat bagaimana ini akan terlihat dalam contoh

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

Di sini kami mengambil file

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

1 kami. Setelah file dibaca dari disk, kami menjalankan fungsi

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

9 dengan respons sebagai parameter. Untuk mendapatkan data JSON dari respons, kami menjalankan fungsi

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

Fungsi

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

_3 juga mengembalikan janji. Inilah mengapa kami mengembalikannya dan merangkai fungsi

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

9 lainnya. Pada fungsi

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

_9 kedua kita mendapatkan data JSON aktual sebagai parameter. Data ini terlihat seperti data di file JSON kita

Sekarang kita dapat mengambil data ini dan menampilkannya di halaman HTML kita. Perhatikan bahwa kita memanggil fungsi yang disebut

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

7. Di sinilah kami membuat kode yang akan menambahkan data ke halaman kami

Perhatikan bahwa dalam fungsi

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

_0 kami, kami hanya menulis pesan kesalahan ke konsol luar. Biasanya Anda akan menampilkan pesan kesalahan kepada pengguna jika terjadi kesalahan

Menampilkan data JSON

Sebelum kita menampilkan data JSON kita di halaman web, mari kita lihat seperti apa isi file

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

2 kita

Cukup sederhana bukan? . Rencana kami adalah mengisi data JSON kami di dalam div ini secara dinamis

Ada beberapa cara untuk menampilkan data di HTML kita. Kita bisa membuat meja dan membuatnya terlihat sangat bagus dengan gaya yang bagus. Namun, kami akan melakukan ini dengan cara yang sederhana dan jelek

Tujuan kami adalah hanya menampilkan nama lengkap orang-orang di file JSON kami

Langkah 1 – Dapatkan elemen div dari body

Ingat div dengan

_0 id dari

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

2 kita? Kami ingin mengambil div itu menggunakan JavaScript. Kami membutuhkan ini karena kami akan mengisi div dengan orang-orang di file JSON kami

Ini adalah bagaimana kita akan melakukannya

var mainContainer = document.getElementById("myData");

Kami mendapatkan elemen dengan menjalankan fungsi ________22______3. Ini akan menemukan elemen dengan id

0. Ini adalah vanilla JavaScript dan ini adalah cara kami melakukan pengembangan front-end di masa lalu. )

Langkah 2 – Ulangi setiap objek di objek JSON kita

Langkah selanjutnya adalah membuat loop sederhana. Kami kemudian bisa mendapatkan setiap objek dalam daftar objek JSON kami dan menambahkannya ke div utama kami

for (var i = 0; i < data.length; i++) {
  // append each person to our page
}

Langkah 3 – Tambahkan setiap orang ke halaman HTML kita

Di dalam for-loop kita akan menambahkan setiap orang di dalam div-nya sendiri. Kode ini akan diulang tiga kali untuk setiap orang

Pertama, kita akan membuat elemen div baru

var div = document.createElement("div");

Selanjutnya kita akan mengisi div tersebut dengan nama lengkap dari file JSON kita

div.innerHTML = 'Name: ' + data[i].firstName + ' ' + data[i].lastName;

Terakhir, kami akan menambahkan div ini ke wadah utama kami

mainContainer.appendChild(div);

Itu dia. Sekarang kita telah selesai menambahkan data JSON ke index. halaman html. Fungsi lengkap

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

_7 terlihat seperti ini

function appendData(data) {
  var mainContainer = document.getElementById("myData");
  for (var i = 0; i < data.length; i++) {
    var div = document.createElement("div");
    div.innerHTML = 'Name: ' + data[i].firstName + ' ' + data[i].lastName;
    mainContainer.appendChild(div);
  }
}

Saat kami menjalankan index. html, maka akan terlihat seperti ini

Bukan aplikasi yang paling indah, tetapi menyelesaikan pekerjaan

Mari kita lihat seluruh file HTML dengan JavaScript

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

Coba salin dan tempel ini di editor Anda sendiri. Sebagai latihan, Anda bisa mencoba menata output agar terlihat lebih bagus. Ingatlah untuk menyertakan file

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

_1 juga. File ini harus berada di direktori yang sama dengan file

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

2 Anda agar berfungsi

Mengapa menggunakan JavaScript Vanila?

Anda mungkin bertanya-tanya apa gunanya membuat ini di vanilla JavaScript. Bukankah aplikasi web modern menggunakan framework dan library seperti Angular, ReactJS, atau VueJS?

Ya, Anda mungkin benar, sebagian besar waktu. Tetapi beberapa halaman web hanya statis dengan logika yang sangat sedikit

Jika Anda hanya ingin men-tweak beberapa bagian kecil dari situs web, mungkin berlebihan untuk memasukkan perpustakaan besar yang akan memperlambat situs

Selain itu, kerangka kerja dan perpustakaan datang dan pergi. JavaScript vanilla lama yang bagus akan tetap ada. Jadi gunakan setiap kesempatan untuk mempelajarinya, Anda tidak tahu kapan Anda membutuhkannya

Bisakah saya memasukkan JSON ke dalam HTML?

Jawabannya. Ya, Anda dapat menyisipkan data terstruktur JSON baik di badan atau kepala .

Bagaimana cara menampilkan data file JSON dalam HTML?

Kode jQuery menggunakan metode getJSON() untuk mengambil data dari lokasi file menggunakan permintaan HTTP GET AJAX . Dibutuhkan dua argumen. Salah satunya adalah lokasi file JSON dan yang lainnya adalah fungsi yang berisi data JSON. Fungsi each() digunakan untuk mengiterasi semua objek dalam array.

Bagaimana cara mengikat data JSON dalam HTML?

data-bind="foreach. list" Ini mirip dengan menggunakan untuk setiap loop dalam javascript. Ini akan mengulangi semua elemen dalam daftar dari DataModel (objek Json). Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag Di sini kita mengikat atribut src dari tag