Reparei que ao clicar novamente no botão, que acredito que deveria ser um refresh para caso alterem o arquivo ele só atualizar, nosso botão acaba duplicando os resultados.
Como conseguimos fazer a verificação se o arquivo já existe e se existe apenas atualizar?
var botao = document.querySelector("#buscar-pacientes");
botao.addEventListener("click", function(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes");
var erroAjax = document.querySelector("#erro-ajax");
xhr.addEventListener("load", function(){
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();
});