Response: json() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年3月.
json() は Response インターフェイスのメソッドで、 Response のストリームを取得して完全に読み取ります。本体のテキストを JSON として解釈した結果で解決するプロミス��返します。
なお、このメソッドは json() という名前であるにもかかわらず、結果は JSON ではありません。入力として JSON を取って解釈し、 JavaScript のオブジェクトを生成します。
構文
js
json()
引数
なし。
返値
JavaScript オブジェクトに解決される Promise。 このオブジェクトは、オブジェクト、配列、文字列、数値など、JSON で表現できるものであれば何でもなります。
例外
DOMExceptionAbortError-
リクエストが中止された場合。
TypeError-
以下のいずれかの原因で発生します。
- レスポンス本体が妨害またはロックされている場合。
- 本体コンテンツをデコードする際にエラーが発生した場合（例えば、
Content-Encodingヘッダーが不正な場合など）。
SyntaxError-
このレスポンスの本体が JSON として解釈できなかった場合。
例
fetch json の例（fetch json をライブで実行）では、 Request() コンストラクターを使用して新しいリクエストを作成し、それを使用して .json ファイルを読み取ります。
読み取りに成功したら、json() を使用してデータを読み取り、解析し、結果のオブジェクトから期待通りに値を読み出し、それらの値をリスト項目に追加して商品データとして表示します。
js
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) {
const 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);
}
})
.catch(console.error);
仕様書
| Specification |
|---|
| Fetch # ref-for-dom-body-json① |