Pengambilan pertama kamu

Tunjukkan pada saya: ambil – memesan dengan kode

Pada pelajaran terakhir, kamu membuka API di browser kamu dengan tangan. Sekarang JavaScript kamu akan melakukan hal yang sama – dengan perintah fetch:

const adresa = 'https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&current_weather=true';

const odpoved = await fetch(adresa);
const data = await odpoved.json();

console.log(data.current_weather.temperature);

Apa yang terjadi di sini, baris demi baris:

1. fetch(adresa) – mengirim permintaan (pelayan menuju ke dapur).
2. menunggu – tunggu hingga muncul kembali. Internet membutuhkan waktu sebentar!
3. odpoved.json() – mengubah respons menjadi objek JavaScript.
4. Kemudian kamu bekerja dengan data seperti objek biasa lainnya: titik, titik, selesai.

async function nacti() {
  // fetch and await go here
}
nacti();

Cetak data pada halaman

Konsol ini untuk pemrogram – pengunjung ingin melihat data di halaman:

<p id="teplota">Loading…</p>

<script type="module">
  const odpoved = await fetch('https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&current_weather=true');
  const data = await odpoved.json();

  document.querySelector('#teplota').textContent =
    `Right now it's ${data.current_weather.temperature} °C`;
</script>

Hal-hal familiar dari Magician (querySelector, textContent) ditambah fetch baru. Tidak lebih.

Giliran kamu 💪

1. Tambahkan paragraf dengan id="teplota" dan skrip di atas ke situs web kamu.
2. Ubah koordinat ke kota kamu sendiri.
3. Tambahkan juga kecepatan angin ke tampilan (data.current_weather.windspeed).
4. Bonus: bila suhu di bawah 0, tambahkan ”🥶 Bundel!” ke teks.

Apa yang bisa diambil dari pelajaran ini

• fetch(adresa) mengirimkan permintaan, await menunggu respons.
• .json() mengonversi respons menjadi objek yang sudah kamu ketahui cara kerjanya.
• Data dari seluruh internet kini hanya tinggal satu fungsi saja.

© 2026 Ing. Martin Polak / AlgoRhino · Ketentuan penggunaan konten