var botaoAdicionar = document.querySelector("#buscar-pacientes");
botaoAdicionar.addEventListener("click", function(){
console.log("Buscando pacientes...");
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();
});
Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas
respostas
não esta importando os pacientes externos... Pode me ajudar...
Paulo, aparece algum erro no console quando você clica no botão com o id buscar-pacientes?
Abraços e bons estudos.
Não tem mensagem nenhuma de erro no console.
Verifique seu método adicionaPacienteNaTabela, pois testando seu código pude ver que os pacientes estão sendo importados.
Coloque aqui seu form.js e index.html
Segue o form.js
var botaoAdicionar = document.querySelector("#adicionar-paciente"); botaoAdicionar.addEventListener("click", function(event){
event.preventDefault();
var form = document.querySelector("#form-adiciona"); //Extraindo informações do paciente do form. var paciente = obtemPacienteDoFormulario(form);
var erros = validaPaciente(paciente); if(erros.length > 0){ exibeMensagensDeErro(erros); return; }
adicionaPacienteNaTabela(paciente);
form.reset(); var mensagensErro = document.querySelector("#mensagens-erro"); mensagensErro.innerHTML = ""; });
function adicionaPacienteNaTabela() { //Cria tr e td do paciente. var pacienteTr = montaTr(paciente);
//Adicionando um paciente na tr. var tabela = document.querySelector("#tabela-pacientes");
tabela.appendChild(pacienteTr); }
function exibeMensagensDeErro(erros){ var ul = document.querySelector("#mensagens-erro"); ul.innerHTML = ""; erros.forEach(function(erro1){ var li = document.createElement("li"); li.textContent = erro1; ul.appendChild(li); });
}
function obtemPacienteDoFormulario(form){
var paciente = { nome: form.nome.value, peso: form.peso.value, altura: form.altura.value, gordura: form.gordura.value, imc: calculaImc(form.peso.value, form.altura.value) } return paciente; }
function montaTr(paciente){ var pacienteTr = document.createElement("tr"); pacienteTr.classList.add("paciente");
pacienteTr.appendChild(montaTd(paciente.nome, "info-nome")); pacienteTr.appendChild(montaTd(paciente.peso, "info-peso")); pacienteTr.appendChild(montaTd(paciente.altura, "info-altura")); pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura")); pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));
return pacienteTr; }
function montaTd(dado, classe){ var td = document.createElement("td"); td.textContent = dado; td.classList.add(classe);
return td; }
function validaPaciente(paciente){
var erros = [];
if(paciente.nome.length == 0){ erros.push("Faltou o nome do paciente."); }
if(!validaPeso(paciente.peso)){ erros.push("O valor do peso esta errado."); }
if(!validaAltura(paciente.altura)){ erros.push("O valor da altura esta errado."); }
if(paciente.gordura.length == 0){ erros.push("O campo gordura esta vazio."); }
if(paciente.peso.length == 0){ erros.push("O Campo peso esta vazio.") }
if(paciente.altura.length == 0){ erros.push("O Campo altura esta vazio.") }
return erros; }
segue o index.html
<!DOCTYPE html>
Aparecida Nutrição
Meus pacientes
Filtre:| Nome | Peso(kg) | Altura(m) | Gordura Corporal(%) | IMC |
|---|---|---|---|---|
| Paulo | 100 | 2.00 | 10 | 0 |
| João | 80 | 2.72 | 40 | 0 |
| Erica | 54 | 1.64 | 14 | 0 |
| Douglas | 85 | 1.73 | 24 | 0 |
| Tatiana | 46 | 1.55 | 19 | 0 |
Adicionar novo paciente
Nome:
Peso:
Altura:
% gordura:
Paulo
na definição da sua function adicionaPacienteNaTabela esta faltando você passar o paciente, veja o que você definiu
function adicionaPacienteNaTabela() { //Cria tr e td do paciente.e o correto
function adicionaPacienteNaTabela(paciente) { //Cria tr e td do paciente.
solução!
nossa, valeu....