Assalamu’alaikum warahmatullahi wabarakatuh

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Cara Menampilkan Data Json Dengan javascript. Jadi pada latihan kali ini ide nya sendiri adalah menampilkan data dari Json kemudian kita berikan event klik pada setiap list nya, dan pada setiap list yang di klik akan menampilkan detail nya. Dalam hal ini kita gabungkan berbagai fungsi javascript diantaranya adalah onclick(), createElement(),for(), className dan forEach().

Pertama – tama kita buat terlebih dahulu struktur html nya

Kemudian save dengan nama index.html, setelah itu kita siapkan data Json nya dalam latihan ini saya menggunakan data seperti gambar di bawah ini.

Kemudian kita looping dengan foreach() yang di dalam nya kita createElement li nya dan berikan className untuk class bootstrap nya selanjutnya kita masukkan tag li nya kedalam ul dengan fungsi appendChild() teman – teman ketikkan seperti script di bawah ini

Selanjutnya kita looping dengan for() dan didalam nya kita berikan event onclick() dan memainkan dispay none atau block untuk detail nya.

Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Cara Menampilkan Data Json Dengan javascript

Jika di klik salah satu list maka akan tampil detail nya

Cara Menampilkan Data Json Dengan javascript

Jika di klik back to movies maka akan di kembalikan pada data list nya, bisa teman – teman perhatikan pada latihan diatas kita tidak menggunakan halam detail melainkan memainkan display none dan block saja, baik sekian pada artikel kali ini Cara Menampilkan Data Json Dengan javascript kita jumpa kembali pada artikel selanjutnya. Terimakasih dan sampai jumpa, semoga bermanfaat.

Assalamu’alaikum warahmatullahi wabarakatuh