Cara Menampilkan Data Realtime COVID-19 Menggunakan Javascript
Cara Menampilkan Data Realtime COVID-19 Menggunakan Javascript – Beberapa bulan terakhir, Indonesia dan dunia sedang berjuang hebat mengahadapi pandemi virus corona (Covid-19). Banyak cara yang dapat kita lakukan untuk ikut membantu, salah satunya dengan membagikan informasi perkembangan kasus Covid-19 di Indonesia. Dengan turut membagikan informasi semacam ini, saya rasa itu akan sangat bermanfaat. Saat ini telah terdapat banyak situs web terpercaya yang menampilkan perkembangan kasus covid 19 di Indonesia contohnya seperti yang ada pada situs : https://covid19.go.id/.
Bagi kalian yang ingin ikut menampilkan informasi perkembangan kasus covid-19 di Indonesia melalui situs web, kalian dapat memanfaatkan teknologi “Fetch” pada Javascript serta API Data Covid-19 yang telah disediakan oleh orang-orang baik. Berikut caranya !
API Data Covid-19 Indonesia
Untuk datanya, kita memerlukan sumber yang benar dan akurat. Ada beberapa Web API yang menyediakan data realtime kasus covid-19 di indonesia, salah satu yang saya temukan adalah API milik mathdroid yang saya rasa datanya benar dan akurat karena bersumber dari data global covid-19 milik esri.
adapun endpoint yang akan kita gunakan adalah sebagai berikut :
Ringkasan kasus Covid-19 seluruh Indonesia : https://indonesia-covid-19.mathdro.id/api
Data Kasus Covid-19 per-Provinsi : https://indonesia-covid-19.mathdro.id/api/provinsi
Untuk mengambil data dari API tersebut kita akan memanfaatkan fungsi fetch() pada javascript. Fungsi inilah yang akan menangani metode request data dari layanan API.
Membuat Halaman HTML
Pertama kita akan membuat sebuah halaman HTML dengan nama “index.html”. Data covid-19 nantinya akan kita tampilkan pada halaman ini.
<html>
<head>
<title>Data Covid 19</title>
</head>
<body>
<h1>DATA COVID 19 INDONESIA</h1>
Positif : <span id="data-positif"></span> <br>
Sembuh : <span id="data-sembuh"></span> <br>
Meninggal : <span id="data-meninggal"></span><br>
<table border="1" id="table-provinsi">
</table>
</body>
</html>
di atas adalah contoh halaman HTML sederhana untuk menampilkan data yang kita ambil dari API. Jika mau, kalian dapat mengubah tampilannya agar menjadi lebih menarik.
Membuat File api.js
Sekarang kita buat sebuah file baru dengan nama “api.js” pada folder yang sama dengan file “index.html”. File ini bertugas untuk mengambil data dari API sebelum ditampilkan pada halaman “index.html”. Nah, method fetch() yang sebelumnya sudah kita singgung sedikit akan diletakkan di dalam file ini :
function getDataIndonesia() { fetch('https://indonesia-covid-19.mathdro.id/api') .then(response => response.json()) .then(data => { console.log(data) let positif = data.jumlahKasus let sembuh = data.sembuh let meninggal = data.meninggal document.getElementById("data-positif").innerHTML = positif document.getElementById("data-sembuh").innerHTML = sembuh document.getElementById("data-meninggal").innerHTML = meninggal }) .catch(err => { console.log(err) }); }
Perhatikan pada bagian fetch(). pada baris ini kita akan mengambil data dari endpoint https://indonesia-covid-19.mathdro.id/api/. Data yang telah didapat, masing-masingnya akan ditampilkan pada element dengan id “data-positif”, “data-sembuh”, dan “data-meninggal” yang ada di halaman “index.html”
Kemudian buka kembali file “index.html”. Tambahkan kode berikut tepat di atas tag </body> di dalam file “index.html”
<script src="api.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
getDataIndonesia();
})
</script>
kode di atas digunakan untuk memuat file “api.js” ke dalam file “index.html”. Perhatikan pada blok event DOMContentLoaded, di bagian ini kita menjalankan method getDataIndonesia() setelah seluruh halaman selesai dimuat. Simpan file ini.
Sekarang kita coba jalankan file “index.html” melalui browser. Jika berhasil, data realtime Covid-19 di Indonesia akan ditampilkan pada halaman ini. Untuk keakuratan data, kalian dapat mengeceknya sendiri dengan melihat situs-situs resmi yang juga menayangkan data kasus covid-19, misalnya https://covid19.go.id/. Bandingkan data yang ditampilkan, sama bukan? tentu saja.
Menampilkan Data per-Provinsi
Sekarang kita akan mencoba menampilkan data kasus covid-19 di indonesia berdasarkan masing-masing Provinsi, caranya tak jauh berbeda. Pada file “api.js” tambahkan method berikut :
function getDataProvinsi() { let dataProvinsi = "<tr><th>Provinsi</th><th>Positif</th><th>Sembuh</th><th>Meninggal</th></tr>"; fetch('https://indonesia-covid-19.mathdro.id/api/provinsi') .then(response => response.json()) .then(data => { console.log(data) data.data.forEach(function(item) { dataProvinsi += '<tr>' dataProvinsi += '<td>'+ item.provinsi + '</td>' dataProvinsi += '<td>'+ item.kasusPosi + '</td>' dataProvinsi += '<td>'+ item.kasusSemb + '</td>' dataProvinsi += '<td>'+ item.kasusMeni + '</td>' dataProvinsi += '</tr>' }) document.getElementById("table-provinsi").innerHTML = dataProvinsi }) .catch(err => { console.log(err) }); }
Pada method getDataProvinsi kita juga menggunakan fetch(), hanya saja endpointnya berbeda dengan sebelumnya. Kali ini endpointnya kita arahkan ke https://indonesia-covid-19.mathdro.id/api/provinsi untuk mengambil data kasus covid-19 per-provinsinya.
Langkah terakhir, jalankan juga method getDataProvinsi Pada file “index.html”. Ubah blok DOMContentLoaded menjadi seperti berikut :
document.addEventListener("DOMContentLoaded", function() {
getDataIndonesia();
getDataProvinsi();
})
Sekarang, coba kalian jalankan kembali file “index.html” melalui browser. Data sebaran covid-19 berdasarkan provinsi akan ditampilkan secara realtime !
Selesai ! begitulah Cara Menampilkan Data Realtime COVID-19 Menggunakan Javascript. Hanya dengan memanfaatkan fungsi fetch() dan API, kita sudah dapat menampilkan informasi kasus covid-19 di indonesia. Jika ada yang perlu kalian tanyakan tentang tulisan ini, silahkan diskusikan melalui kolom komentar di bawah artikel ini, ya. semoga bermanfaat.
10 Comments
Pak saya praktekan ini keweb api lain kok ndak bisa yah pak, mohon sarannya… saya sudah kirim email kebapak…
Terimakasih sudah memberikan komentar.
silahkan cek email, sudah saya berikan tanggapanny pak.
Pak, bagaimana cara menampilkan data corona di hanya satu provinsi? Contohnya hanya menampilkan data corona jakarta
Terimakasih kang Rafliano ZA sudah memberikan komentar !
Untuk menampilkan data dari provinsi tertentu bisa dengan cara sama seperti mengambil data seluruh provinsi, hanya saja langsung menuju pada index tertentu sesuai provinsi, tanpa perulangan. Sebagai contoh untuk provinsi jakarta ada pada index ke – 0 : https://pastebin.com/Gi3qtyjs
atau bisa dengan cara lain yang lebih baik, seperti : https://stackoverflow.com/questions/8163859/how-can-i-get-data-in-json-array-by-id/14723688
kalo mengguanakan fitur pencarian per-provinsi bagaimana mas?? saya sudah erulang kali mencobanya tetap saja error
sudah coba cara ini mas ? cari data berdasarkan id provinsinya:https://stackoverflow.com/questions/8163859/how-can-i-get-data-in-json-array-by-id/14723688
hasil errornya gimana ?
Terimakasih ilmunya mas, sangat bermanfaat sekali buat mengerjakan tugas saya 😀
terimakasih kembali kang sudah memberi komentar 😄
Maaf, mas.
Saya boleh minta penjelasan tentang
“data.data.forEach(function(item)” dan “dataProvinsi +=” ?
Saya sedikit kesulitan mempraktekan code ini karena web api yang dijadikan contoh sudah tidak aktif.
Terima kasih.
hi, maaf baru bisa jawab ya..
“data.data.forEach(function(item)” itu buat looping data json dari API. itemnya mengikuti return data json dari APInya, coba diliat api yg kamu pakai itu return jsonnya seperti apa, tinggal disesuaikan.
“dataProvinsi +=” itu maksudnya buat menggabungkan value baru ke value yg ada di dalam variable dataProvinsi. Contoh lain :
gabungText = ‘mohon’
gabungText += ‘ Maaf’
maka saat variabel gabungText ditampilkan akan menghasilkan text “mohon Maaf”. gituuu.