Body.json()

Body ミックスインの json() メソッドは、 Response ストリームを取得したうえで、すべて読み取ります。本文のテキストを JSON として解釈した結果で解決する promise を返します。

構文

response.json().then(data => {
  // データを使用した処理を実行する
});

パラメーター

なし。

返値

本文のテキストを JSON として解釈した結果で解決する promise です。これは JSON で表現されているあらゆるもの — オブジェクト、配列、文字列、数値など — になる可能性があります。

例

fetch json example (fetch json live を実行してみてください) では、 Request コンストラクターを使用して新しいリクエストを生成したうえで、 .json ファイルを取得しています。取得が成功したら、 json() を使用してレスポンスのデータを読み取り、期待通りにオブジェクトになる結果の値を読みだし、商品データとして表示するために、リスト項目に追加を行っています。

const myList = document.querySelector('ul');
const myRequest = new Request('products.json');

fetch(myRequest)
  .then(response => response.json())
  .then(data => {
    for (const product of data.products) {
      let listItem = document.createElement('li');
      listItem.appendChild(
        document.createElement('strong')
      ).textContent = product.Name;
      listItem.append(
        ` can be found in ${
          product.Location
        }. Cost: `
      );
      listItem.appendChild(
        document.createElement('strong')
      ).textContent = `£${product.Price}`;
      myList.appendChild(listItem);
    }
  });

仕様書

ブラウザーの対応

関連情報

• ServiceWorker API
• オリジン間リソース共有 (CORS)
• HTTP