Cara menampilkan data json dari api di html

Question

Ini adalah tutorial kode langsung tentang cara mengambil data menggunakan JavaScript biasa dan Menampilkan data pada halaman web HTML sederhana

Table of Contents Show

Menampilkan data pada halaman HTML
Bagaimana cara mengambil data dari file JSON dan menampilkannya dalam HTML?
Bagaimana cara menampilkan data dari JSON dalam HTML?
Bagaimana cara mengambil data dari API dan ditampilkan dalam HTML?
Bagaimana cara menampilkan data API di JSON?

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JSON-JS</title>
  </head>
  <body>
    <h1>countries: a long list</h1>
    <div id="country"></div>
    <script src="script.js"></script>
  </body>
</html>

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

fetch('countries.json')

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()

0

Pertama saya membuat heading dan menugaskannya ke variabel 'output'

function fetchData() {

}

fetchData()

_1

Karena 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()

_2

Kode di atas akan melewati seluruh array data yang dikembalikan

function fetchData() {

}

fetchData()

_3

Dalam 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()

_4

Baris 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

Bagaimana cara mengambil data dari file JSON dan menampilkannya 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 menampilkan data dari JSON dalam HTML?

Untuk membaca data JSON dari server lokal atau jarak jauh, kami akan menggunakan metode fetch() . Metode fetch() mengambil URL file JSON sebagai argumen dan mengembalikan objek Promise. Setelah menyelesaikan objek Promise kita akan mendapatkan data JSON di objek Response. Kami memiliki data JSON dalam data yang disimpan dalam sebuah variabel.

Bagaimana cara mengambil data dari API dan ditampilkan dalam HTML?

Mendekati. Pertama buat file JavaScript, file HTML, dan file CSS yang diperlukan. Kemudian simpan URL API dalam variabel (di sini api_url). Tentukan fungsi async (di sini getapi()) dan berikan api_url dalam fungsi tersebut. Tetapkan respons konstan dan simpan data yang diambil dengan metode await fetch()