Cara Menampilkan Data Dari Fetch JSON

Sebelum membahas terlalu jauh mengenai JSON, mari kita pahami dahulu, apa itu JSON ?

Menurut wikipedia, JSONadalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek).

JSON sering sekali digunakan sebagai penghubung antara framework yang berbeda. Misalnya antara database dengan sistem android, atau database dengan website. Salah satu hal yang menjembatani antara data website dan pada aplikasi adroid adalah JSON ini.

Disini kita akan belajar secara sederhana bagaimana cara memanggil dan menampilkan JSON pada bidang web. JSON yang akan kita gunakan kali ini adalah JSON public yang bisa kamu dapatkan di Google.

Pertama, untuk memanggil JSON, kamu akan memerlukan Jquery Framework. Taruh kode berikut sebelum script pemanggilan JSON. Jquery ini sangat berguna untuk memudahkan dalam penggunaan JavaScript lainnya.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Lalu, siapkan link untuk JSONnya. Disini sebagai contoh, saya akan menggunakan link https://api.covid19api.com/world/total dimana akan memberikan return seperti ini. Untuk REST API yang lainnya, dapat kamu coba juga.

	{"TotalConfirmed":26301230,"TotalDeaths":868684,"TotalRecovered":17510555}

Untuk memanggilnya dan menampilkan data JSON, cukup sederhana, seperti code berikut

<button onclick="tryJSON();">Klik Disini</button>

<script>

function tryJSON(){

    $.ajax({url: "https://api.covid19api.com/world/total", success: function(result){

    alert(result.TotalConfirmed);   

}

});

};

</script>

Untuk mencobanya, silahkan klik tombol dibawah ini

Kamu juga dapat bereksperimen dengan mengguna layanan API yang lainnya. Banyak sekali manfaat yang bisa kamu dapatkan dengan menggunakan JSON.

Seperti hampir semua aplikasi yang ada pada smartphone, mereka menggunakan JSON API untuk memanggil datanya. Data tersebut bisa didapatkan dari REST API dengan platform yang sangat berbeda.

Kurang lebih seperti itu, untuk JSON dengan Multidimention Array akan kita bahas di artikel selanjutnya. Semoga bermanfaat dan membantu.

Terima kasih telah membaca artikel ini & dipublikasikan oleh Viospaper Pro