{"id":956,"date":"2024-04-15T20:00:00","date_gmt":"2024-04-15T23:00:00","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=956"},"modified":"2024-04-15T20:35:43","modified_gmt":"2024-04-15T23:35:43","slug":"manipulando-json-e-criando-elementos-html-com-javascript","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=956","title":{"rendered":"Manipulando JSON e Criando Elementos HTML com JavaScript"},"content":{"rendered":"\n<p>Voc\u00ea est\u00e1 pronto para elevar suas habilidades em JavaScript a um novo patamar? Neste artigo, vamos mergulhar no fascinante mundo da manipula\u00e7\u00e3o de dados JSON e da cria\u00e7\u00e3o din\u00e2mica de elementos HTML usando o poderoso m\u00e9todo <strong>map<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Uma Breve Introdu\u00e7\u00e3o<\/h2>\n\n\n\n<p>Antes de mergulharmos na m\u00e1gica do m\u00e9todo <strong>map<\/strong>, vamos recapitular o que \u00e9 <strong>JSON<\/strong>. <\/p>\n\n\n\n<p>JSON, ou JavaScript Object Notation, \u00e9 um formato leve de troca de dados amplamente utilizado na web. Ele \u00e9 f\u00e1cil de ler e escrever para humanos e f\u00e1cil de analisar para m\u00e1quinas.<\/p>\n\n\n\n<p>Um exemplo b\u00e1sico de um objeto JSON seria:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"273\" height=\"147\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-22.png\" alt=\"\" class=\"wp-image-957\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Manipulando JSON com JavaScript<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"643\" height=\"335\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-23.png\" alt=\"\" class=\"wp-image-958\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-23.png 643w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-23-300x156.png 300w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todo Map<\/h2>\n\n\n\n<p>Este m\u00e9todo \u00e9 uma ferramenta poderosa para manipular arrays em JavaScript. Ele cria uma nova matriz com os resultados de uma fun\u00e7\u00e3o aplicada a cada elemento da matriz.<\/p>\n\n\n\n<p>Vamos ver como podemos usar o m\u00e9todo <strong>map <\/strong>para criar uma lista de elementos HTML dinamicamente com base em um <strong>array <\/strong>de <strong>objetos JSON<\/strong>:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"685\" height=\"637\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-24.png\" alt=\"\" class=\"wp-image-959\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-24.png 685w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-24-300x279.png 300w\" sizes=\"(max-width: 685px) 100vw, 685px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"355\" height=\"128\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-25.png\" alt=\"\" class=\"wp-image-960\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-25.png 355w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-25-300x108.png 300w\" sizes=\"(max-width: 355px) 100vw, 355px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Hoje vamos criar um exemplo pr\u00e1tico que utiliza o m\u00e9todo fetch para obter dados de um arquivo JSON e o m\u00e9todo map para criar cards na tela com base nesses dados.<\/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=\"Manipulando JSON e Criando Elementos HTML com JavaScript\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/zcQ0U386wPE?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<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>carros.json\n<\/strong>\n\n   &#91;\n\n{\n    \"nome\": \"CARRO1\",\n    \"imagem\": \"img\/carro1.jpg\"\n},\n{\n    \"nome\": \"CARRO2\",\n    \"imagem\": \"img\/carro2.jpg\"\n},\n{\n    \"nome\": \"CARRO3\",\n    \"imagem\": \"img\/carro3.jpg\"\n},\n{\n    \"nome\": \"CARRO4\",\n    \"imagem\": \"img\/carro4.jpg\"\n},\n{\n    \"nome\": \"CARRO5\",\n    \"imagem\": \"img\/carro5.jpg\"\n}\n\n\n    ]\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\n<strong>index.html\n<\/strong>\n&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;Json com JavaScript e HTML&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;style&gt;\n    .container{\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-around;\n    }\n\n    .card{\n        border:1px solid #ccc;\n        border-radius: 8px;\n        padding: 16px;\n        margin: 10px;\n        width: 200px;\n        text-align: center;\n        box-sizing: border-box;\n    }\n    .card img{\n        max-width: 100%;\n        width: 150px;\n        height: 200px;\n        border-radius: 8px;\n    }\n    .card h3{\n        margin-top: 8px;\n    }\n    \n&lt;\/style&gt;\n&lt;body&gt;\n\n    &lt;div class=\"container\" id=\"carros-container\"&gt;\n        &lt;!--&lt;div class=\"card\"&gt;\n            &lt;img src=\"img\/carro1.jpg\" alt=\"\"&gt;\n            &lt;h3&gt;CARRO1&lt;\/h3&gt;\n        &lt;\/div&gt;   --&gt;\n         \n             \n    &lt;\/div&gt;\n\n    &lt;script&gt;\n        function carregar(){\n            fetch('carros.json')\n                .then(response =&gt; response.json())\n                .then(carros =&gt;{\n                    const container = document.querySelector('#carros-container');\n\n                    carros.map(carro=&gt;{\n\n                        const card = document.createElement(\"div\");\n                        card.classList.add(\"card\");\n\n                        const img = document.createElement(\"img\");\n\n                        img.src = carro.imagem;\n\n                        img.alt = carro.nome;\n\n                        const titulo = document.createElement(\"h3\");\n                        titulo.textContent = carro.nome;\n\n                        card.appendChild(img);\n                        card.appendChild(titulo);\n                        container.appendChild(card);\n                    })\n                   \n                })\n\n                \n        }\n        carregar();\n               \n    &lt;\/script&gt;\n\n    \n    \n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>O m\u00e9todo <strong>map <\/strong>\u00e9 uma ferramenta valiosa em seu arsenal de JavaScript. Ele simplifica a manipula\u00e7\u00e3o de <strong>arrays <\/strong>e torna a cria\u00e7\u00e3o din\u00e2mica de elementos HTML uma tarefa muito mais simples.<\/p>\n\n\n\n<p>Espero que este artigo tenha sido \u00fatil para expandir seu conhecimento sobre manipula\u00e7\u00e3o de JSON, cria\u00e7\u00e3o de elementos HTML e o poder do m\u00e9todo <strong>map <\/strong>em JavaScript. Experimente e explore mais esse recurso em seus projetos futuros. Se tiver alguma d\u00favida ou sugest\u00e3o, n\u00e3o hesite em compartilhar nos coment\u00e1rios abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea est\u00e1 pronto para elevar suas habilidades em JavaScript a um novo patamar? Neste artigo, vamos mergulhar no fascinante mundo da manipula\u00e7\u00e3o de dados JSON e da cria\u00e7\u00e3o din\u00e2mica de elementos HTML usando o poderoso m\u00e9todo map. Uma Breve Introdu\u00e7\u00e3o Antes de mergulharmos na m\u00e1gica do m\u00e9todo map, vamos recapitular o que \u00e9 JSON. JSON, ou JavaScript Object Notation, \u00e9 um formato leve de troca de dados amplamente utilizado na web. Ele \u00e9 f\u00e1cil de ler e escrever para humanos e f\u00e1cil de analisar para m\u00e1quinas. Um exemplo b\u00e1sico de um objeto JSON seria: Manipulando JSON com JavaScript M\u00e9todo Map Este m\u00e9todo \u00e9 uma ferramenta poderosa para manipular arrays em JavaScript. Ele cria uma nova matriz com os resultados de uma fun\u00e7\u00e3o aplicada a cada elemento da matriz. Vamos ver como podemos usar o m\u00e9todo map para criar uma lista de elementos HTML dinamicamente com base em um array de objetos JSON: Hoje vamos criar um exemplo pr\u00e1tico que utiliza o m\u00e9todo fetch para obter dados de um arquivo JSON e o m\u00e9todo map para criar cards na tela com base nesses dados. Conclus\u00e3o O m\u00e9todo map \u00e9 uma ferramenta valiosa em seu arsenal de JavaScript. Ele simplifica a manipula\u00e7\u00e3o de arrays e torna a cria\u00e7\u00e3o din\u00e2mica de elementos HTML uma tarefa muito mais simples. Espero que este artigo tenha sido \u00fatil para expandir seu conhecimento sobre manipula\u00e7\u00e3o de JSON, cria\u00e7\u00e3o de elementos HTML e o poder do m\u00e9todo map em JavaScript. Experimente e explore mais esse recurso em seus projetos futuros. Se tiver alguma d\u00favida ou sugest\u00e3o, n\u00e3o hesite em compartilhar nos coment\u00e1rios abaixo.<\/p>\n","protected":false},"author":1,"featured_media":967,"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\/956"}],"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=956"}],"version-history":[{"count":7,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/956\/revisions"}],"predecessor-version":[{"id":969,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/956\/revisions\/969"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/967"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}