Dalam tutorial ini, saya akan menunjukkan cara mengambil dan menampilkan data dari file JSON menggunakan vanilla JavaScript
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 });Thefetch(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 dalamfetch(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 namafilefetch(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 denganfetch(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); });3
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
<body> <div id="myData"></div> </body>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 <body> <div id="myData"></div> </body>_0 id darifetch(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 <body> <div id="myData"></div> </body>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 });0Coba 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