取ったデータを描画する

非同期JavaScript：API通信とモジュール / 全 5 枚

非同期JavaScript：API通信とモジュール - 取ったデータを描画する

返ってくるのは配列

1 件ぶんのオブジェクトではなく、作品が並んだ配列が返ってきます。配列なら length で件数が取れますし、map で 1 件ずつ HTML に変えられます。ここから先は今まで書いてきた配列の操作がそのまま使えます。

取ってくるまでには少し時間がかかります。その間に画面に何が出ているのかを、次の枚で並べます。

配列に変わった時点で、外から来たデータだということは忘れて構いません。

const res = await fetch("https://yumesaku.tech/course-api/works.json");
const works = await res.json();
console.log(works.length); // 3
console.log(works[0].title); // "夜の図書館"

1 / 5

← → キーでも送れます

このスライドが付いているレッスンを開く