1
resposta

O código seguido a risca, tem um problema, pelo que percebi. Quando busca o paciente duas vezes seguidas ele duplica os pacientes. Como resolver corretamente?

var botaoAdicionar = document.querySelector('#buscar-pacientes');

botaoAdicionar.addEventListener('click', function() {

var xhr = new XMLHttpRequest(); 

xhr.open('GET', 'https://api-pacientes.herokuapp.com/pacientes'); 

xhr.addEventListener('load', function(){ 
    var erroAjax = document.querySelector('#erro-ajax');
    if(xhr.status ==200){ 
        erroAjax.classList.add('invisivel'); 

        var resposta = xhr.responseText; 
        var pacientes = JSON.parse(resposta);  

        pacientes.forEach(function(paciente){ 
        adicionaPacienteNaTabela(paciente); 
        });    
    } else {
        console.log(xhr.status); 
        console.log(xhr.responseText); 

        erroAjax.classList.remove('invisivel'); 
    }

});

xhr.send(); 

});

1 resposta

Bom dia, Carlos! Como vai?

Isso ocorre pois o código tem como objetivo ser didático pra quem está iniciando no sertão da programação! Mais pra frente, em outros cursos vc verá que existem técnicas como paginação de dados onde a cada requisição vc pegará um conjunto de dados diferente.

Sendo assim, como essa questão não é o foco de agora, sugiro que vc siga em frente rumo à luz do conhecimento! E, em no momento correto esse tipo de assunto será apresentado a vc em cursos posteriores!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software