Se você é novo no desenvolvimento web com JavaScript, provavelmente já ouviu falar do método fetch(). Este método é uma poderosa ferramenta para fazer requisições HTTP de forma simples e eficiente. No vídeo de hoje, vamos explorar o método fetch() e aprender como usá-lo para interagir com arquivo Jason para recuperar dados e apresentar esse dados no HTML.

O método fetch() em JavaScript é usado para fazer requisições HTTP para um recurso da web. Ele fornece uma maneira mais moderna e poderosa de fazer solicitações do que os métodos tradicionais, como XMLHttpRequest, também podemos usar o fetch() para fazer solicitações POST, PUT, DELETE e outras, fornecendo um objeto de configuração adicional como segundo parâmetro.

O desenvolvimento web moderno depende cada vez mais da capacidade de buscar e enviar dados de forma eficiente pela internet. Se você é novo na programação web ou apenas começou a explorar JavaScript, entender como usar o método fetch() pode abrir um mundo de possibilidades para interagir com APIs e recuperar dados de forma assíncrona.

Ficheiro Json

Listando Todos os Dados Do Array funcionarios

Listando os Funcionários Pelo Índice

Separando o Array com MAP

Listando os Funcionários no HTML



HTML <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pegando dados do Json</title> </head> <body> <div id="Cadastro"></div> <script> const divCadastro = document.querySelector('#Cadastro'); fetch('arquivo.json').then(resposta =>{ return resposta.json(); }).then ((informacoes)=>{ informacoes.funcionarios.map(listagem =>{ divCadastro.innerHTML += `<li>${listagem.nome} - ${listagem.idade} - ${listagem.profissao} </li>` }) }) </script> </body> </html>


FICHEIRO JSON { "funcionarios":[ { "nome":"Marcos", "idade": 40, "profissao": "Analista de Redes" }, { "nome":"Ricardo", "idade": 40, "profissao": "Analista de Dados" } ] }


Conclusão

O método fetch() é uma ferramenta essencial para qualquer desenvolvedor web que precise interagir com APIs e recuperar dados de forma assíncrona. Com sua sintaxe simples e poderosa, ele permite criar aplicativos web modernos e responsivos. Com ele, você pode facilmente recuperar e enviar dados pela internet, tornando suas aplicações web mais dinâmicas e interativas.

Espero que este guia tenha sido útil para entender o básico do método fetch() em JavaScript. Experimente você mesmo e comece a explorar suas possibilidades!