{"id":276,"date":"2024-01-28T18:14:24","date_gmt":"2024-01-28T21:14:24","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=276"},"modified":"2024-04-13T17:54:35","modified_gmt":"2024-04-13T20:54:35","slug":"como-usar-javascript-para-pegar-dados-de-um-arquivo-json","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=276","title":{"rendered":"Como Usar JavaScript para Pegar Dados de um Arquivo JSON"},"content":{"rendered":"\n<p>Se voc\u00ea \u00e9 novo no desenvolvimento web com JavaScript, provavelmente j\u00e1 ouviu falar do m\u00e9todo <code>fetch()<\/code>. Este m\u00e9todo \u00e9 uma poderosa ferramenta para fazer requisi\u00e7\u00f5es HTTP de forma simples e eficiente. No v\u00eddeo de hoje, vamos explorar o m\u00e9todo <code>fetch()<\/code> e aprender como us\u00e1-lo para interagir com arquivo Jason para recuperar dados e apresentar esse dados no HTML.<\/p>\n\n\n\n<p>O m\u00e9todo <code>fetch()<\/code> em JavaScript \u00e9 usado para fazer requisi\u00e7\u00f5es HTTP para um recurso da web. Ele fornece uma maneira mais moderna e poderosa de fazer solicita\u00e7\u00f5es do que os m\u00e9todos tradicionais, como XMLHttpRequest,  tamb\u00e9m podemos usar o fetch() para fazer solicita\u00e7\u00f5es POST, PUT, DELETE e outras, fornecendo um objeto de configura\u00e7\u00e3o adicional como segundo par\u00e2metro.<\/p>\n\n\n\n<p>O desenvolvimento web moderno depende cada vez mais da capacidade de buscar e enviar dados de forma eficiente pela internet.  Se voc\u00ea \u00e9 novo na programa\u00e7\u00e3o web ou apenas come\u00e7ou a explorar JavaScript, entender como usar o m\u00e9todo <code>fetch()<\/code> pode abrir um mundo de possibilidades para interagir com APIs e recuperar dados de forma ass\u00edncrona.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Arquivo Json<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"424\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-10.png\" alt=\"\" class=\"wp-image-937\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-10.png 555w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-10-300x229.png 300w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Listando Todos os Dados Do Array funcionarios<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"765\" height=\"735\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-21.png\" alt=\"\" class=\"wp-image-954\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-21.png 765w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-21-300x288.png 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"735\" height=\"486\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-5.png\" alt=\"\" class=\"wp-image-932\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-5.png 735w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-5-300x198.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-5-500x330.png 500w\" sizes=\"(max-width: 735px) 100vw, 735px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Listando os Funcion\u00e1rios Pelo \u00cdndice<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"811\" height=\"738\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-19.png\" alt=\"\" class=\"wp-image-950\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-19.png 811w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-19-300x273.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-19-768x699.png 768w\" sizes=\"(max-width: 811px) 100vw, 811px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"742\" height=\"350\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-7.png\" alt=\"\" class=\"wp-image-934\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-7.png 742w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-7-300x142.png 300w\" sizes=\"(max-width: 742px) 100vw, 742px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Separando o Array com MAP<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"803\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-13.png\" alt=\"\" class=\"wp-image-940\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-13.png 764w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-13-285x300.png 285w\" sizes=\"(max-width: 764px) 100vw, 764px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"733\" height=\"581\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-12.png\" alt=\"\" class=\"wp-image-939\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-12.png 733w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-12-300x238.png 300w\" sizes=\"(max-width: 733px) 100vw, 733px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Listando os Funcion\u00e1rios no HTML<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"807\" height=\"718\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-14.png\" alt=\"\" class=\"wp-image-941\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-14.png 807w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-14-300x267.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-14-768x683.png 768w\" sizes=\"(max-width: 807px) 100vw, 807px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"274\" height=\"52\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-16.png\" alt=\"\" class=\"wp-image-943\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Como Usar JavaScript para Pegar Dados de um Arquivo JSON | Desvendando o C\u00f3digo\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/odrfZGVy2E4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Conclus\u00e3o<\/h3>\n\n\n\n<p>O m\u00e9todo <code>fetch()<\/code> \u00e9 uma ferramenta essencial para qualquer desenvolvedor web que precise interagir com APIs e recuperar dados de forma ass\u00edncrona. Com sua sintaxe simples e poderosa, ele permite criar aplicativos web modernos e responsivos. Com ele, voc\u00ea pode facilmente recuperar e enviar dados pela internet, tornando suas aplica\u00e7\u00f5es web mais din\u00e2micas e interativas.<\/p>\n\n\n\n<p>Espero que este guia tenha sido \u00fatil para entender o b\u00e1sico do m\u00e9todo <code>fetch()<\/code> em JavaScript. Experimente voc\u00ea mesmo e comece a explorar suas possibilidades!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>HTML<\/strong>\n<strong>\n<\/strong>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Pegando dados do Json&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    \n    &lt;div id=\"Cadastro\"&gt;&lt;\/div&gt;\n\n\n    &lt;script&gt;\n\n        const divCadastro = document.querySelector('#Cadastro');\n\n        fetch('arquivo.json').then(resposta =&gt;{\n            return resposta.json();\n        }).then ((informacoes)=&gt;{\n            informacoes.funcionarios.map(listagem =&gt;{\n                divCadastro.innerHTML += `&lt;li&gt;${listagem.nome} -\n                 ${listagem.idade} - ${listagem.profissao} &lt;\/li&gt;`\n            })\n\n        })\n\n\n\n\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>ARQUIVO JSON<\/strong>\n<strong>\n<\/strong>{\n    \"funcionarios\":&#91;\n\n        {\n            \"nome\":\"Marcos\",\n            \"idade\": 40,\n            \"profissao\": \"Analista de Redes\"\n        },\n        {\n            \"nome\":\"Ricardo\",\n            \"idade\": 40,\n            \"profissao\": \"Analista de Dados\"\n        }\n\n\n    ]\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea \u00e9 novo no desenvolvimento web com JavaScript, provavelmente j\u00e1 ouviu falar do m\u00e9todo fetch(). Este m\u00e9todo \u00e9 uma poderosa ferramenta para fazer requisi\u00e7\u00f5es HTTP de forma simples e eficiente. No v\u00eddeo de hoje, vamos explorar o m\u00e9todo fetch() e aprender como us\u00e1-lo para interagir com arquivo Jason para recuperar dados e apresentar esse dados no HTML. O m\u00e9todo fetch() em JavaScript \u00e9 usado para fazer requisi\u00e7\u00f5es HTTP para um recurso da web. Ele fornece uma maneira mais moderna e poderosa de fazer solicita\u00e7\u00f5es do que os m\u00e9todos tradicionais, como XMLHttpRequest, tamb\u00e9m podemos usar o fetch() para fazer solicita\u00e7\u00f5es POST, PUT, DELETE e outras, fornecendo um objeto de configura\u00e7\u00e3o adicional como segundo par\u00e2metro. O desenvolvimento web moderno depende cada vez mais da capacidade de buscar e enviar dados de forma eficiente pela internet. Se voc\u00ea \u00e9 novo na programa\u00e7\u00e3o web ou apenas come\u00e7ou a explorar JavaScript, entender como usar o m\u00e9todo fetch() pode abrir um mundo de possibilidades para interagir com APIs e recuperar dados de forma ass\u00edncrona. Arquivo Json Listando Todos os Dados Do Array funcionarios Listando os Funcion\u00e1rios Pelo \u00cdndice Separando o Array com MAP Listando os Funcion\u00e1rios no HTML Conclus\u00e3o O m\u00e9todo fetch() \u00e9 uma ferramenta essencial para qualquer desenvolvedor web que precise interagir com APIs e recuperar dados de forma ass\u00edncrona. Com sua sintaxe simples e poderosa, ele permite criar aplicativos web modernos e responsivos. Com ele, voc\u00ea pode facilmente recuperar e enviar dados pela internet, tornando suas aplica\u00e7\u00f5es web mais din\u00e2micas e interativas. Espero que este guia tenha sido \u00fatil para entender o b\u00e1sico do m\u00e9todo fetch() em JavaScript. Experimente voc\u00ea mesmo e comece a explorar suas possibilidades!<\/p>\n","protected":false},"author":1,"featured_media":568,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/276"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=276"}],"version-history":[{"count":14,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/276\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/276\/revisions\/955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/568"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}