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

Tabela aparece vazia

Olá eu fiz igual o professor instruiu na aula, porém quando eu clico no botão "Buscar" ele adiciona os tr e td direitinho, mas eles aparecem sem conteúdo (vazios) e eu não consigo identificar o porque disso estar ocorrendo. Tem como alguém me ajudar, segue os códigos com o nome das abas em cima para dividi=los e dar mais contexto.

buscar_paciente9.js

var botaoBuscar = document.querySelector("#buscar-paciente");

botaoBuscar.addEventListener("click", function(){
    var xhr = new XMLHttpRequest();

    xhr.open("GET", "http://api-pacientes.herokuapp.com/pacientes");

    xhr.addEventListener("load", function(){
        var resposta = xhr.responseText;
        var pacientes = JSON.parse(resposta);

        pacientes.forEach( function(paciente) {
            adicionaPacienteNaTabela(paciente);
        });
    });

    xhr.send();
});

form.js

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click",function(event){
    event.preventDefault();

    var form = document.querySelector("#form-adiciona");

    var paciente = obtemPaciente(form);

    var erros = MensagemDeErros(paciente);
    console.log(erros);
    if(erros.length > 0){
        exibeMensagemDeErros(erros);
        return;
    }

    adicionaPacienteNaTabela(paciente);

    form.reset();

    var limpaUl = document.querySelector("#mensagens-erros")
    limpaUl.innerHTML = "";
});

function obtemPaciente(form){
    var dados = {
        nomeValue: form.nome.value,
        pesoValue: Number(form.peso.value).toFixed(2),
        alturaValue: Number(form.altura.value).toFixed(2),
        gorduraValue: Number(form.gordura.value).toFixed(2),
        imcValue: calculaImc(form.peso.value,form.altura.value)
    };
    return dados;
};

function montaTd(dado,classe){

    var tdPronta = document.createElement("td");
    tdPronta.textContent = dado;
    tdPronta.classList.add(classe);
    return tdPronta;
}

function montaTr(paciente){
    var trPronta = document.createElement("tr");
    trPronta.classList.add("paciente");
    trPronta.appendChild(montaTd(paciente.nomeValue,"info-nome"));
    trPronta.appendChild(montaTd(paciente.pesoValue,"info-peso"));
    trPronta.appendChild(montaTd(paciente.alturaValue,"info-altura"));
    trPronta.appendChild(montaTd(paciente.gorduraValue,"info-gordura"));
    trPronta.appendChild(montaTd(paciente.imcValue,"info-imc"));;
    return trPronta;
};

function MensagemDeErros(paciente){

    var erros = [];

    if(!validaPeso(paciente.pesoValue)){ 
        erros.push("Peso Inválido");
    }
    if(!validaAltura(paciente.alturaValue)){ 
        erros.push("Altura Inválida");
    }
    if(paciente.gorduraValue.length == 0){
        erros.push("Gordura não pode ficar em branco (miguérsrs)");
    }
    if(paciente.nomeValue.length < 2){
        erros.push("O nome não pode conter menos de dois caracteres");
    }
    return erros;
}

function adicionaPacienteNaTabela(paciente){
    var pacienteTr = montaTr(paciente);
    var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr);
};

function exibeMensagemDeErros(erros){
    var ul = document.querySelector("#mensagens-erros");
    ul.innerHTML = "";
    erros.forEach(function(erro){
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    })
}
2 respostas

Se não encontrarem o erro, me avisem que eu passo o link do arquivo completo ou edito a pergunta e coloco o resto das abas que faltam, que não coloquei por agora pelo fato de acreditar ser desnecessário, já que o professor não chegou a utiliza-las.

solução!

Daniel, se vc buscar <http://api-pacientes.herokuapp.com/pacientes> o resultado será:

[
{
nome: "Jéssica",
peso: 47,
altura: 1.54,
gordura: 17,
imc: 19.82
},
...

No montaTr vc esta fazendo referência a nomeValue

Tire o Value

  function montaTr(paciente) {
    console.log(paciente);
    var trPronta = document.createElement("tr");
    trPronta.classList.add("paciente");
    trPronta.appendChild(montaTd(paciente.nome, "info-nome"));
    trPronta.appendChild(montaTd(paciente.peso, "info-peso"));
    trPronta.appendChild(montaTd(paciente.altura, "info-altura"));
    trPronta.appendChild(montaTd(paciente.gordura, "info-gordura"));
    trPronta.appendChild(montaTd(paciente.imc, "info-imc"));
    return trPronta;
  }