Bagaimana cara mengambil data dari file json dan menampilkan html menggunakan javascript?

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 JSON dalam HTML menggunakan JavaScript?
Bagaimana cara mengonversi data JSON ke tabel HTML menggunakan JavaScript?
Bagaimana cara mengambil data dari file JSON di JavaScript?
Bagaimana cara mem-parsing data JSON di halaman HTML?
Bagaimana cara mengambil data dari API dan ditampilkan dalam HTML?

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 JSON dalam HTML menggunakan JavaScript?

Jika Anda memuat ini dari file eksternal, Anda memerlukan Ajax atau jenis panggilan serupa. Untuk menggunakan Ajax, Anda harus menambahkan perpustakaan bernama jQuery ke file HTML proyek Anda. Kemudian Anda dapat memanggil JSON Anda tanpa mereferensikannya sebagai variabel javascript seperti yang Anda lihat di cuplikan kode kerja berikut.

Bagaimana cara mengonversi data JSON ke tabel HTML menggunakan JavaScript?

Lihat JSON2HTML http. //json2html. com/ plugin untuk jQuery. Ini memungkinkan Anda menentukan transformasi yang akan mengubah objek JSON Anda menjadi template HTML. Gunakan pembuat di http. //json2html. com/ untuk mendapatkan objek transformasi json untuk template html apa pun yang diinginkan . Dalam kasus Anda, ini akan menjadi tabel dengan baris yang memiliki transformasi berikut.

Bagaimana cara mengambil data dari file JSON di JavaScript?

Jawaban Anda .

Mention the path of the json file in the script source along with the javascript file. .

Dapatkan Objek dari file json. var mydata = JSON. mengurai(data);

Bagaimana cara mem-parsing data JSON di halaman HTML?

Contoh - Mengurai JSON . Use the JavaScript function JSON. parse() untuk mengonversi teks menjadi objek JavaScript. const obj = JSON. parse('{"nama". "Yohanes", "umur". 30, "kota". "New York"}'); .

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

kode javascript