3
respostas

forEach is not a function

Pessoal, boa tarde!

Não estou conseguindo avançar em um exercício que tenho aqui, se parece muito com a pagina criada no curso JavaScript: Programando na linguagem da web. Meu problema está na implementação do botaoBuscar ao escrever o mesmo código que o Douglas nos passa é apresentado erro na linha do botaoBuscar. addEvent .... Mas procurando algumas soluções na internet consegui arrumar, porém agora o meu forEach está apresentando o mesmo erro (forEach is not a function).

Poderiam me ajudar?

Obrigado, Marlon.

document.addEventListener("DOMContentLoaded", function(){
    var botaoBuscar = document.querySelector("#buscar-paciente");

    botaoBuscar.addEventListener("click", function(){
        var xhr = new XMLHttpRequest();

        xhr.open("GET", "https://kidopilabs.com.br/exercicio/api/pacientes");

        xhr.addEventListener("load", function(){
            var resposta = xhr.responseText;
            var pacientes = JSON.parse(resposta);

            pacientes.forEach( function(paciente){
                adicionaPacienteNaTabela(paciente);
            })
        });

        xhr.send();
    })
})
3 respostas

Fala ai Marlon, tudo bem? Verifique o valor da variável pacientes, acredito que ela possa ser um objeto e não um array.

Adiciona um console.log depois de sua declaração e antes do forEach:

document.addEventListener("DOMContentLoaded", function(){
    var botaoBuscar = document.querySelector("#buscar-paciente");

    botaoBuscar.addEventListener("click", function(){
        var xhr = new XMLHttpRequest();

        xhr.open("GET", "https://kidopilabs.com.br/exercicio/api/pacientes");

        xhr.addEventListener("load", function(){
            var resposta = xhr.responseText;
            var pacientes = JSON.parse(resposta);
        console.log(pacientes) // adicionando o log...
            pacientes.forEach( function(paciente){
                adicionaPacienteNaTabela(paciente);
            })
        });

        xhr.send();
    })
})

Verifique o que será logado.

Espero ter ajudado.

Matheus, bom dia!

Primeiramente obrigado por estar sempre presente por aqui!

No meu cosole é apresentado um ARRAY com 21 itens, adicionando typeOf pacientes = Object

Bom dia Marlon, magina, estamos aqui para ajudá-los sempre que possível.

No meu cosole é apresentado um ARRAY com 21 itens, adicionando typeOf pacientes = Object

É porque em JavaScript não existe o tipo array por baixo dos panos o array é um objeto.

Eu fiz um teste aqui com o seu código e olha o retorno da API:

{"pacientes": [{"id":"9","nome":"$NOME.val()","idade":"0","sexo":"0"},{"id":"19","nome":"aaa","idade":"4","sexo":"2"},{"id":"5","nome":"Ana","idade":"15","sexo":"2"},{"id":"8","nome":"Ana","idade":"15","sexo":"2"},{"id":"15","nome":"deniseee","idade":"25","sexo":"2"},{"id":"17","nome":"dijij","idade":"20","sexo":"1"},{"id":"18","nome":"dzsad","idade":"21","sexo":"2"},{"id":"16","nome":"euaskooskosak","idade":"20","sexo":"1"},{"id":"2","nome":"Hugo","idade":"28","sexo":"1"},{"id":"3","nome":"Marcos","idade":"45","sexo":"1"},{"id":"1","nome":"Maria","idade":"34","sexo":"2"},{"id":"7","nome":"Mariana","idade":"30","sexo":"2"},{"id":"12","nome":"Mario Adolfi","idade":"10","sexo":"1"},{"id":"13","nome":"Mario Adolfi","idade":"10","sexo":"1"},{"id":"4","nome":"Pietra","idade":"5","sexo":"2"},{"id":"6","nome":"Samuel","idade":"32","sexo":"1"},{"id":"10","nome":"sasa","idade":"21","sexo":"2"},{"id":"11","nome":"TESTE","idade":"200","sexo":"1"},{"id":"20","nome":"teste1","idade":"1","sexo":"1"},{"id":"14","nome":"teste123","idade":"1234","sexo":"2"},{"id":"21","nome":"teste2","idade":"2","sexo":"2"}]}

Como você pode ver, é um objeto que contem uma propriedade chamava pacientes, sendo assim, você precisa acessar essa propriedade para depois percorrer o array.

Poderíamos modificar o codigo para:

document.addEventListener("DOMContentLoaded", function(){
    var botaoBuscar = document.querySelector("#buscar-paciente");

    botaoBuscar.addEventListener("click", function(){
        var xhr = new XMLHttpRequest();

        xhr.open("GET", "https://kidopilabs.com.br/exercicio/api/pacientes");

        xhr.addEventListener("load", function(){
            var resposta = xhr.responseText;
            var data = JSON.parse(resposta);
            data.pacientes.forEach( function(paciente){
                adicionaPacienteNaTabela(paciente);
            })
        });

        xhr.send();
    })
})

Repare nesse trecho:

var data = JSON.parse(resposta);
data.pacientes.forEach( function(paciente){
    adicionaPacienteNaTabela(paciente);
})

Primeiro a gente conversa a resposta de texto para um objeto JavaScript, passamos a referência dela para a variavel data e depois acessamos a propriedade pacientes do nosso objeto.

Acho que isso deve resolver seu problema.

Espero ter ajudado.