aboutsummaryrefslogtreecommitdiff
path: root/files/ja/orphaned/web/api/body/json
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/orphaned/web/api/body/json')
-rw-r--r--files/ja/orphaned/web/api/body/json/index.html92
1 files changed, 92 insertions, 0 deletions
diff --git a/files/ja/orphaned/web/api/body/json/index.html b/files/ja/orphaned/web/api/body/json/index.html
new file mode 100644
index 0000000000..3ee9cd7c6d
--- /dev/null
+++ b/files/ja/orphaned/web/api/body/json/index.html
@@ -0,0 +1,92 @@
+---
+title: Body.json()
+slug: orphaned/Web/API/Body/json
+tags:
+ - API
+ - BODY
+ - Experimental
+ - Fetch
+ - JSON
+ - Method
+ - Reference
+ - メソッド
+translation_of: Web/API/Body/json
+original_slug: Web/API/Body/json
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p><span class="seoSummary">{{DOMxRef("Body")}} ミックスインの <strong><code>json()</code></strong> メソッドは、 {{DOMxRef("Response")}} ストリームを取得して、完全に読み取ります。 ボディのテキストを {{JSxRef("JSON")}} として解釈した結果で解決する promise を返します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>response</em>.json().then(<em>data</em> =&gt; {
+ // data を使用した処理を実行する
+});</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<p>なし。</p>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>JavaScript オブジェクトに解決される {{jsxref("Promise")}}。 このオブジェクトは、オブジェクト、配列、文字列、数値など、JSON で表現できるものであれば何でもなります。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json の例</a>(<a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json をライブで</a>実行)では、 {{DOMxRef("Request.Request", "Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して <code>.json</code> ファイルをフェッチします。 フェッチが成功したら、<code>json()</code> を使用してデータを読み取り、解析し、結果のオブジェクトから期待通りに値を読みだし、それらの値をリスト項目に追加して商品データとして表示します。</p>
+
+<pre class="brush: js highlight[5]">const myList = document.querySelector('ul');
+const myRequest = new Request('products.json');
+
+fetch(myRequest)
+ .then(response =&gt; response.json())
+ .then(data =&gt; {
+ 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);
+ }
+ });</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">仕様</th>
+ <th scope="col">状態</th>
+ <th scope="col">コメント</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}</td>
+ <td>{{Spec2("Fetch")}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.Body.json")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/ja/docs/Web/HTTP/CORS">オリジン間リソース共有 (CORS)</a></li>
+ <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
+</ul>