【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ヘ出力する方法について紹介しました。

以上で解説を終わります。