Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Buscar pacientes duplica pacientes a cada clique.

Referente ao curso JavaScript: programando na linguagem da web, no capítulo AjaxBuscando pacientes com AJAX e atividade Capturando erros de requisição

por Icaro Solon Souza Tamarindo
| 77.1k xp | 2 posts
Analista de TI

Gostaria de saber como devo fazer para verificar se o usuário já clicou no botão anteriormente e já foram carregados os pacientes via Ajax, caso tenham sido, não carregar novamente os mesmos pacientes

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

botao.addEventListener("click", function () {

    var xhr = new XMLHttpRequest();
    var pacientes = [];
    xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes");
    //abre a conexão

    xhr.addEventListener("load", function () {
        var erroAjax = document.querySelector("#erro-ajax");

        if (xhr.status == 200) {
            erroAjax.classList.add("invisivel");
            resposta = xhr.responseText;
            pacientes = JSON.parse(resposta);

            pacientes.forEach(paciente => {
                adicionaPacienteNaTabela(paciente);
            });
        } else {
            console.log(xhr.status);
            console.log(xhr.responseText);
            var erroAjax = document.querySelector("#erro-ajax");
            erroAjax.classList.add("mensagens-erro")
            erroAjax.classList.remove("invisivel");
        }
    });
    xhr.send();
});
3 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Icaro, tudo bem?

Antes de inserir o paciente na tabela, você poderia verificar se o mesmo já esta inserido ou não, ou seja, inserir apenas caso o mesmo não esteja na tabela.

Espero ter ajudado.

solução!
por Henrique
| 119.6k xp | 52 posts

Fala Icaro, estava com a mesma pulga atrás da orelha. Encontrei uma solução com esta função: 

function pacienteDuplicado(pacienteRequisitado, pacienteExistente){

    console.log("Entrei na função");
    console.log("pacienteRequisitado ", pacienteRequisitado);
    console.log("pacienteExistente ", pacienteExistente);


    for(i = 0; i < pacienteExistente.length; i++){
        var existPac = {
        nome: pacienteExistente[i].querySelector(".info-nome").textContent,
        peso: pacienteExistente[i].querySelector(".info-peso").textContent,
        altura: pacienteExistente[i].querySelector(".info-altura").textContent,
        gordura: pacienteExistente[i].querySelector(".info-gordura").textContent
        }

        if (existPac.nome == pacienteRequisitado.nome && existPac.peso == pacienteRequisitado.peso && existPac.altura == pacienteRequisitado.altura && existPac.gordura == pacienteRequisitado.gordura){
            var duplicata = document.querySelector("#duplicata");
            duplicata.classList.remove("invisivel");
            console.log("paciente duplicado - " + pacienteRequisitado.nome);
            return true;               
        }
    }
}

Essa função testa o paciente requisitado (da API) com todos os pacientes da lista. Sei que não deve ser o jeito mais eficiente de verificar a duplicação, mas foi a forma que encontrei. Depois disso, apenas chamei a função pra dentro do forEach que o professor aplicou no último vídeo. Dessa forma: 

pacientes.forEach(function(requestPac){

            if(!pacienteDuplicado(requestPac, pacienteExistente)){

                addPacienteNaTabela(requestPac);
}

Espero ter ajudado. Qualquer dúvida ou comentário estou aqui!

Abraço

por Icaro Solon Souza Tamarindo
| 77.1k xp | 2 posts
Analista de TI

Isso resolveu o problema. Agradeço o apoio, pessoal!