【JavaScript】fetchメソッドを使ってJSONを非同期で読み込み・HTMLに出力する方法

JavaScriptでfetchメソッドを使い、JSONを非同期で読み込み。
HTMLへ出力したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
本記事で扱うJSONデータ
[
{
"name": "佐藤",
"age": 20
},
{
"name": "鈴木",
"age": 30
},
{
"name": "高橋",
"age": 40
}
]
本記事では例として上記JSONデータを読み込み・ HTMLに出力。
JSONデータリストを作成します。
fetchメソッドでJSONを読み込み
// jsonデータを読み込み
async function jsonUsers() {
const response = await fetch('users.json');
const json = await response.json();
return json;
}
fetchメソッドを使って、JSONを読み込むコード例です。
コードの詳細は以下の通りです。
asyncで非同期処理を宣言
async function jsonUsers() {}
関数宣言の前にasyncを記述。
Promiseを返し、非同期処理されるjsonUsers関数を定義します。
fetchメソッドでJSONをHTTPリクエスト
//fetchでjsonデータを読み込み
const response = await fetch('users.json');
const json = await response.json();
return json;
fetchメソッドでJSONデータをHTTPリクエスト(読み込み)します。
引数に読み込みたいJSONのURLを指定。
fetchの前にawaitを記述して、処理が完了するまで待ちます。
上記で取得できたオブジェクトを、jsonメソッドでJSON形式に変換・取得します。
以上でJSONの読み込みが完了しました。
JSONデータをHTMLへ出力
// jsonデータをhtmlに出力
async function usersList() {
// jsonデータ読み込みの関数
const users = await jsonUsers();
// ulタグ
const ul = document.querySelector('ul');
// ループ処理
for (const user of users) {
// liタグを生成
const li = document.createElement('li');
// liタグの中身にJSONデータを出力
li.textContent = `${user.name}です。年齢は${user.age}歳です。`;
// ulタグ内にliタグを配置
ul.appendChild(li);
}
}
usersList();
//html出力結果
//佐藤です。年齢は20歳です。
//鈴木です。年齢は30歳です。
//高橋です。年齢は40歳です。
最後にJSONデータをHTMLへ出力します。
前章と同じくasyncで新たに非同期処理の関数を定義。
関数内で前章で定義したjsonUsers関数を読み込み。
HTMLでulタグを用意して変数に格納。
for…of文を使って、JSONデータをループで取り出し。
liタグを生成し、上記データを入れます。
appendChildメソッドで生成したliタグをulタグ内に移動。
以上でJSONデータをHTML(ulタグ)に出力。
JSONデータリストの完成です。
まとめ
JavaScriptでfetchメソッドを使い、JSONを非同期で読み込み、HTMLヘ出力する方法について紹介しました。
以上で解説を終わります。