files/pt-br/web/api/body/json/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

---
title: Body.json()
slug: Web/API/Body/json
tags:
  - API
  - Experimental
  - Fetch
  - JSON
  - Referencia
translation_of: Web/API/Body/json
---
<div>{{APIRef("Fetch API")}}</div>

<p>O método <strong><code>json()</code></strong>  do mixin {{DOMxRef("Body")}} usa uma stream do objeto {{DOMxRef("Response")}} para tratar. O método <strong>json() </strong>retorna uma Promise como resultado do processamento da stream, retornando um objeto {{JSxRef("JSON")}} em caso de sucesso.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox notranslate"><em>response</em>.json().then(<em>data</em> =&gt; {
  // do something with your data
});</pre>

<h3 id="Parâmetros">Parâmetros</h3>

<p>Nenhum.</p>

<h3 id="Retorno">Retorno</h3>

<p>Uma {{jsxref("Promise")}} que retorna um objeto Javascript no método <strong>resolve()</strong>. Pode ser qualquer tipo que pode ser representado com JSON — objeto, array, string, numeral...</p>

<h2 id="Exemplo">Exemplo</h2>

<p>Em nosso <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">exemplo de fetch em json</a> (teste <a href="http://mdn.github.io/fetch-examples/fetch-json/">aqui a busca em json com fetch</a>), nós criamos uma nova requisição usando o constructor de {{DOMxRef("Request.Request", "Request()")}}, e em seguimos a usamos para buscar um arquivo <code>.json</code>. Quando o fetch é bem-sucedido, nós lemos e tratamos a stream com o método <code>json()</code>, lê os valores em forma de objeto retornados como esperado e inserimos na lista para exibir os dados dos produtos.</p>

<pre class="brush: js highlight[5] notranslate">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);
    }
  })
  .catch(console.error);</pre>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specificações</th>
   <th scope="col">Status</th>
   <th scope="col">Comentários</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}</td>
   <td>{{Spec2("Fetch")}}</td>
   <td>Definição Inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2>


<p>{{Compat("api.Body.json")}}</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
 <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li>
 <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
</ul>