こんにちは!
今日もAPI使ってますか??やましょです。
この記事で分かること
- APIを使ったデータ取得と表示
前回の振り返り
前回までの記事でスプレッドシートを使ってAPIを作成する方法をまとめました!
実際に環境を作って実装したい方はぜひこちらの記事をご覧ください。
今回作るもの
前回までで作成したユーザAPIを使って、メンバー一覧表を作成します。
See the Pen 【API】Members List by Syohei Yamaki (@syohei-yamaki) on CodePen.
実装方法
今回はVue.jsを使って、実装をしてます。
- APIを使ってデータを取得
- v-forでデータを表示
- v-ifを使って「読み込み中…」の表示
1. APIを使ってデータを取得
fetch(this.url).then(res => {
return res.json();
}).then(data => {
this.users = data;
}).catch(error => {
console.log("error", error);
});
Fetchを使用してデータを取得します。
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch
データを取得したらdataにあるusers
に値を代入します。
2.v-forでデータを表示
v-forでusers
の値を一覧表示します。
<tbody>
<tr v-for="user in users" :key="user.name">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.description }}</td>
</tr>
</tbody>
3. v-ifを使って「読み込み中…」の表示
データを取得する前は「読み込み中…」と文字を表示して、データを取得できたらテーブルを表示するようにします!
fetch内でデータ取得時にisLoading
をtrueにすることで表示の切り替えをおこないます。
// JavaScript
fetch(this.url).then(res => {
return res.json();
}).then(data => {
this.users = data;
this.isLoading = false;
})
// HTML
<div v-if="isLoading">
読み込み中...
</div>
<table v-else>
...
</table>
Vue.jsを使わずに実装する場合
Vue.jsを使わずに実装したので、こちらを参考にしてください!
See the Pen 【API】Member List with Vanilla JS by Syohei Yamaki (@syohei-yamaki) on CodePen.