From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/body/json/index.html | 91 +++++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 files/ja/web/api/body/json/index.html (limited to 'files/ja/web/api/body/json') diff --git a/files/ja/web/api/body/json/index.html b/files/ja/web/api/body/json/index.html new file mode 100644 index 0000000000..5d470651c4 --- /dev/null +++ b/files/ja/web/api/body/json/index.html @@ -0,0 +1,91 @@ +--- +title: Body.json() +slug: Web/API/Body/json +tags: + - API + - BODY + - Experimental + - Fetch + - JSON + - Method + - Reference + - メソッド +translation_of: Web/API/Body/json +--- +
{{APIRef("Fetch API")}}
+ +

{{DOMxRef("Body")}} ミックスインの json() メソッドは、 {{DOMxRef("Response")}} ストリームを取得して、完全に読み取ります。 ボディのテキストを {{JSxRef("JSON")}} として解釈した結果で解決する promise を返します。

+ +

構文

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

パラメーター

+ +

なし。

+ +

戻り値

+ +

JavaScript オブジェクトに解決される {{jsxref("Promise")}}。 このオブジェクトは、オブジェクト、配列、文字列、数値など、JSON で表現できるものであれば何でもなります。

+ +

+ +

fetch json の例fetch json をライブで実行)では、 {{DOMxRef("Request.Request", "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);
+    }
+  });
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}{{Spec2("Fetch")}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Body.json")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf