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);
    }
  });

仕様書

仕様 状態 備考
Fetch
Body.json() の定義
現行の標準 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
json
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ありFirefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報