Belajar FETCH API Javascript

bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kalian cara menggunakan fetch api. Fetch ini di gunakan untuk mengambil data dan menampilkan data ke browser.

Fetch API ini ada pada saat es 6 tiba.

Kalau teman - teman belum belajar javascript, kalian bisa liat daftar tutorialnya dibawah ini.

Belajar Javascript Lengkap 2021

Kita akan menggunakan 3 case dalam belajar fetch api kali ini.

1. Kita akan mengambil data dengan format.txt lalu kita tampilkan ke browser

2. Kita akan mengambil data json, namun data json nya kita buat sendiri di local

3. Kita mengambil data json, dan data json-nya kita ambil dari https://jsonplaceholder.typicode.com/

Catatan penting : Fetch ini harus berjalan di live server ya, kalian bisa menggunakan xampp, lalu taruh file-nya di htdocs, dengan nama folder fetch, seperti kalian mau menjalankan php atau bisa juga menggunakan extension dari visual studio code yang bernama live server atau bisa juga menggunakan node js. disini om bewok menggunakan web server xampp lalu di taruh di htdocs,

Pertama : Mengambil data dengan format.txt

Buat file terlebih dahulu dengan nama latihan1.html dan file bernama sample.txt. Kodingan-nya seperti dibawah ini

latihan1.html

sample.txt

Maka tampilan-nya seperti dibawah ini.

Penjelasan ada di kodingannya ya, bisa di baca perlahan - lahan

Kedua : Mengambil data.json dari lokal komputer

Nah sebelumnya kita buat 2 file, yang pertama users.json dan yang kedua

latihan2.html kodingan nya seperti dibawah ini

Kita buat users.json seperti dibawah ini

Selanjutnya kita buat kodingan untuk latihan2.html

Maka tampilannya seperti dibawah ini

Ketiga : Mengambil data json dari luar https://jsonplaceholder.typicode.com/

Kita buat file dengan nama latihan3.html

Kali ini kita akan mengambil data json dari internet, ini dilakukan ketika sudah melakukan real project.

Kodingan-nya seperti dibawah ini

Maka tampilannya seperti dibawah ini

Nah om bewok juga sudah membuatkan versi design lebih bagus dengan menggunakan bantuan bootstrap 4, dan juga om bewok menambahkan agar bisa menambahkan data, tapi ketika kita tambahkan akan muncul di console.log.

Kita buat codingan-nya dengan nama latihan4.html

Tampilan-nya seperti dibawah ini.