Como Usar JavaScript para Pegar Dados de um Arquivo JSON

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.

Arquivo 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

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!

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>

ARQUIVO JSON

{
    "funcionarios":[

        {
            "nome":"Marcos",
            "idade": 40,
            "profissao": "Analista de Redes"
        },
        {
            "nome":"Ricardo",
            "idade": 40,
            "profissao": "Analista de Dados"
        }


    ]
}