Ini adalah tutorial kode langsung tentang cara mengambil data menggunakan JavaScript biasa dan Menampilkan data pada halaman web HTML sederhana
Saat membuat situs web, ada kemungkinan Anda akan mendapatkan data dari API. Data dalam JSON, dalam banyak kasus
Bagaimana cara menampilkan JSON adalah halaman HTML saya menggunakan vanilla JS?
Mari kita lakukan dalam beberapa langkah
JS memiliki fungsi bawaan yang disebut function fetchData() { } fetchData() 8 yang digunakan untuk 'mengambil' data dari file atau sumber daya eksternal
Mari kita bekerja pada proyek sederhana
Kami akan mengambil nama negara dan singkatannya dari file JSON dan mencantumkannya di halaman HTML
DEMO LANGSUNG
Mulailah dengan membuat file HTML sederhana. function fetchData() { } fetchData() _9
Saya menambahkan div kosong fetch().then().then().catch() _0 karena kami akan menggunakannya untuk meneruskan daftar negara dari file JSON. negara. json
Pada baris 29, saya menggunakan fetch().then().then().catch() _1 untuk mengimpor file javascript yang akan kita gunakan untuk mendapatkan data
Di folder/direktori yang sama tempat Anda membuat file function fetchData() { } fetchData() 9, buat file baru fetch().then().then().catch() 3
pada file js, buat fungsi kosong lalu panggil di akhir file
function fetchData() { } fetchData()dalam fungsi fetchData() , kita akan menambahkan kode yang mengambil data dari file JSON dan kemudian membuat daftar di HTML
mengambil memiliki sintaks sederhana
fetch().then().then().catch()secara sederhana
Bagian pertama. fetch().then().then().catch() 4, memasukkan URL atau jalur ke sumber daya, blok fetch().then().then().catch() 5 berikut, adalah janji yang mengembalikan respons dalam format yang diinginkan dan yang lainnya untuk menampilkan hasil atau melakukan apa saja dengan hasil. fetch().then().then().catch() 6 mengambil kode yang berjalan ketika ada sesuatu yang salah
Unduh file JSON negara dan tambahkan di folder yang sama dengan file indeks dan skrip
Mari, tambahkan path ke file data kita
File js Anda saat ini seharusnya sudah berisi
function fetchData() { fetch('countries.json') } fetchData()Sekarang mari ambil respon kita dan buat dalam format json
.then((res) => res.json())fetch() mengembalikan janji dengan respons. "res", yang kemudian kita ubah menjadi format JSON
File js Anda saat ini seharusnya sudah berisi
function fetchData() { fetch('countries.json').then((res) => res.json()) } fetchData()Kami sekarang menampilkan data kami. kami dapat menguji keberhasilan menggunakan konsol,
function fetchData() { fetch('countries.json') .then((res) => res.json()) .then((data) => { console.log(data) }) } fetchData()Seperti yang Anda lihat di screenshot, data ditampilkan dalam array data
Terakhir, mari tambahkan penangan kesalahan di fetch().then().then().catch() 6
function fetchData() { fetch('countries.json') .then((res) => res.json()) .then((data) => { console.log(data) }) .catch((error) => { console.log(`Error Fetching data : ${error}`) document.getElementById('country').innerHTML = 'Error Loading Data' }) } fetchData()Menampilkan data pada halaman HTML
Kami melakukan ini dari js menggunakan DOM, kami mengakses bagian dari situs web. fetch().then().then().catch() 8
Pertama perbarui file skrip Anda ke
function fetchData() { fetch('countries.json') .then((res) => res.json()) .then((data) => { console.log(data) let output = '<h2 class="mb-4">Countries</h2>' data.forEach(function (item) { output += ` <ul class="list-group mb-3"> <li class="list-group-item">Country: ${item.Country}</li> <li class="list-group-item">CODE: ${item.ISO2}</li> </ul> ` }) .catch((error) => { console.log(`Error Fetching data : ${error}`) document.getElementById('country').innerHTML = 'Error Loading Data' }) } fetchData()Penjelasan
Kami menambahkan
function fetchData() { } fetchData() 0Pertama saya membuat heading dan menugaskannya ke variabel 'output'
function fetchData() { } fetchData() _1Karena data yang kami dapatkan ada dalam array, kami menggunakan fetch().then().then().catch() 9 untuk mengulang melalui data dan menampilkan setiap item
forEach() dokumen
function fetchData() { } fetchData() _2Kode di atas akan melewati seluruh array data yang dikembalikan
function fetchData() { } fetchData() _3Dalam kode di atas, kode mengambil setiap item dari array dan memasukkannya ke dalam daftar
Saya menggunakan templat literal (fetch('countries.json') _0) karena memungkinkan penggunaan variabel dan juga kita dapat menambahkan tag HTML ke dalamnya. kami mengakses fetch('countries.json') _1 dan fetch('countries.json') 2 yang dikembalikan oleh data yang kami ambil
dokumentasi templat literal
Akhirnya kami menampilkan data
function fetchData() { } fetchData() _4Baris kode di atas mengambil div dengan id 'negara' dan menggunakan fetch('countries.json') 3 kami mengurai dalam variabel fetch('countries.json') 4 tempat kami membuat daftar dari data yang diambil