Olá Vinícius, tudo bem com você?
Como o Gabriel disse, no cotidiano não temos muito esse problema de pegar dados repetidos, apenas nesses casos específicos onde estamos sempre trazendo a mesma informação que temos esse problema, mas vou te dar algumas dicas, ok?
- Bloquear o Botão de Buscar
Bem, essa é a maneira mais fácil, porém pode trazer alguns problemas, mas poderíamos após fazer a requisição para trazer as informações desabilitar o botão, da seguinte maneira:
var botaoAdicionar = document.querySelector('#buscar-pacientes');
Pegaríamos o botão com o seletor e quando a nossa requisição tivesse status == 200 desabilitaríamos
if (xhr.status == 200) {
// Resto do Código
botaoAdicionar.disabled = true;
}
O problema é que para pegar dados atualizados ( caso um novo paciente fosse adicionado em nosso servidor) teríamos que atualizar a página
Essa ideia seria mais ou menos o que você pensou, a única questão é que precisaríamos ter algo único para cada paciente ( um identificador por exemplo) que não temos, então eu vou fingir que no nosso caso o nome é único
A partir disso poderíamos pegar todos os nomes da nossa tabela da seguinte maneira:
var pacientesTabela = document.querySelectorAll('.info-nome');
var pacientesAtuais = separarNome(pacientesTabela);
Acontece que esse pacientesTabela é um array com vários <td>, então eu criei uma função chamada separarNome para pegar todos os pacientes e me retornar um array apenas com os nomes dos pacientes ( que seria o texto que está dentro do <td>)
function separarNome(pacientesTabela){
const pacientes = [];
pacientesTabela.forEach(function(paciente){
pacientes.push(paciente.textContent);
})
return pacientes;
}
Agora temos todos os pacientes que já estão em nossa tabela, e o que eu vou fazer é comparar com os pacientes que a nossa requisição trouxe, da seguinte maneira:
function pacientesNaoExistentes(pacientesAtuais, novosPacientes){
var resultado = [];
}
Vou criar um array de resultados que vai conter apenas os dados não repetidos, e vamos receber 2 listas, agora o que eu tenho que fazer é comparar:
function pacientesNaoExistentes(pacientesAtuais, novosPacientes){
var resultado = [];
novosPacientes.forEach(function(paciente){
Então cada paciente que eu recebi eu vou checar se ele existe da seguinte maneira:
pacientesAtuais.includes(paciente.nome)
Todo array tem o método includes que comparar se um elemento está presente nele ou não, retornando true ou false
Então vou pegar todos elementos que não estão presentes:
function pacientesNaoExistentes(pacientesAtuais, novosPacientes){
var resultado = [];
novosPacientes.forEach(function(paciente){
if(!pacientesAtuais.includes(paciente.nome)){
resultado.push(paciente);
}
})
return resultado;
}
Veja que eu coloquei um ! para negar o resultado, então poderíamos ler essa verificação da seguinte maneira: "Se a lista de pacientes atuais não inclui o paciente" a gente inclui no array de resultados
Esse método nos devolve apenas os pacientes que não estão na lista então agora basta a gente adicionar eles:
if (xhr.status == 200) {
erroAjax.classList.add("invisivel");
var resposta = xhr.responseText;
var pacientes = JSON.parse(resposta);
var pacientesNaoRepetidos = pacientesNaoExistentes(pacientesAtuais, pacientes);
pacientesNaoRepetidos.forEach(function(paciente) {
adicionaPacienteNaTabela(paciente);
});
botaoAdicionar.disabled = true;
} else {
erroAjax.classList.remove("invisivel");
}
});
Compreendeu? Fique tranquilo caso tenha achado um pouco difícil, no dia a dia a gente não precisa fazer todo esse processo :)
E com os cursos de javascript avançado você vai ver que todo esse conhecimento vai sendo explicado!
Em relação a sua dúvida:
Mas ao executar a função ela retorna um array vazio, não compreendo pq. Poderia me ajudar?
Você cometeu um pequeno erro de digitação, temos que procurar pela classe .paciente, você digitou .pacientes dessa forma retorna um array vazio pois não há elementos com essa classe :)
Abraços e Bons Estudos!
