Body ミックスインの json() メソッドは、Response ストリームを取得したうえで、すべて読み取ります。その上で、JSON データを含むオブジェクトリテラルで解決される promise を返します。

構文

response.json().then(function(data) {
  // JSON を使用した処理を実行する
});

パラメーター

なし。

戻り値

ボディテキストをJSONとして解析した結果で解決される promise。この結果はJSONで何が記述されているかで異なります。オブジェクトかもしれないし、配列、文字列、数値、その他になるかもしれません。

fetch json examplefetch json live を実行してみてください)では、Request.Request コンストラクターを使用して新しいリクエストを生成したうえで、.json ファイルを取得しています。取得が成功した場合、json() を使用してレスポンスの JSON を読み取ります。JSON データからデータを読み出し、商品データとして表示するために、リスト項目に追加を行っています。

var myList = document.querySelector('ul');

var myRequest = new Request('products.json');

fetch(myRequest)
  .then(function(response) { return response.json(); })
  .then(function(data) {
    for (var i = 0; i < data.products.length; i++) {
      var listItem = document.createElement('li');
      listItem.innerHTML = '<strong>' + data.products[i].Name + '</strong> can be found in ' +
                           data.products[i].Location +
                           '. Cost: <strong>£' + data.products[i].Price + '</strong>';
      myList.appendChild(listItem);
    }
  });

仕様

仕様 状態 コメント
Fetch
json() の定義
現行の標準  

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

42

411

あり

39

342

なし

29

283

なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし なし あり なし なし なし なし

1. From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

2. From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Experimental Web Platform Features preference.

関連項目

ドキュメントのタグと貢献者

このページの貢献者: woodmix, YuichiNukiyama
最終更新者: woodmix,