Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

não esta importando os pacientes externos... Pode me ajudar...

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();

});
8 respostas

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:
NomePeso(kg)Altura(m)Gordura Corporal(%)IMC
Paulo1002.00100
João802.72400
Erica541.64140
Douglas851.73240
Tatiana461.55190
Erro ao buscar os pacientes...

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....