Body.json()

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

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

構文

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

パラメーター

なし。

戻り値

JSON データを含むオブジェクトリテラルで解決される promise。

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(json) {
    for(i = 0; i < json.products.length; i++) {
      var listItem = document.createElement('li');
      listItem.innerHTML = '<strong>' + json.products[i].Name + '</strong> can be found in ' + json.products[i].Location + '. Cost: <strong>£' + json.products[i].Price + '</strong>';
      myList.appendChild(listItem);
    }
  });
});

仕様

仕様 状態 コメント
Fetch
The definition of 'json()' in that specification.
Living Standard  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 42 [1]
 
39 (39) [2] 未サポート

29 [3]

未サポート
機能 Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート

[1] 41 では、設定で有効にします。

[2] 34 では、設定で有効にします。

[3] 28 では、設定で有効にします。

関連項目

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

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