Entrar Ainda não tem acesso?
1
resposta

não fiz uma função adicionaPacienteNaTabela

Referente ao curso JavaScript: programando na linguagem da web, no capítulo AjaxBuscando pacientes com AJAX e atividade Tratando a resposta da requisição

por Allan Oliveira Teran Jaime
| 133k xp | 43 posts

o codigo do meu forms.js ficou assim:

let botaoAdicionar = document.querySelector("#adicionar-paciente");

botaoAdicionar.addEventListener("click", function(event){
    event.preventDefault();

    let form = document.querySelector("#form-adiciona");
    //extraindo informações do paciente do form
    let paciente = obtemPacienteDoForm(form)

    console.log(paciente);

    // cria as tr e a td do paciente
    let pacienteTr = montaTr(paciente);

    let erros = validaPaciente(paciente);
    console.log(erros);

    if(erros.length > 0){
        exibeMensagensDeErros(erros);
        return;
    }

    //adicionando o paciente na tabelas
    let tabela = document.querySelector("#tabela-pacientes")

    tabela.appendChild(pacienteTr)

    form.reset();
    let mensagensErro = document.querySelector("#mensagens-erro")
    mensagensErro.innerHTML = "";
})

e eu cirei uma outra pasta pra deixar todas as functions, que o codigo ficou assim: 

function obtemPacienteDoForm(form){

    let 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){
    let 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){
    let td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);

    return td
}

function validaPaciente(paciente){

    let erros = [];

    if (!validaPeso(paciente.peso)){
        erros.push("O Peso é Inválido");
    }

    if(!validaAltura(paciente.altura)){
        erros.push("A Altura é Inválida");
    }

    if(paciente.nome.length == 0){
        erros.push("O nome não pode ser em branco")
    }

    if(paciente.gordura.length == 0){
        erros.push("A gordura não pode ser em branco")
    }

    if(paciente.peso.length == 0){
        erros.push("O peso não pode ser em branco") 
    }

    if(paciente.altura.length == 0){
        erros.push("A altura não pode ser em branco")
    }

    return erros;
}

function calculaImc(peso, altura){
    let imc = 0;

    imc = peso / (altura * altura);

    return imc.toFixed(2);
}

function validaPeso(peso){
    if(peso >= 0 && peso < 1000){
        return true
    } else {
        return false
    }
}

function validaAltura(altura) {

    if (altura >= 0 && altura <= 3.0) {
        return true;
    } else {
        return false;
    }
}

function exibeMensagensDeErros(erros){
    let ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

    erros.forEach(function(erro){
        let li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);

    })
}

então não sei como fazer essa função adicionaPacienteNaTabela, nem onde por ela, nem o parametro. alguem poderia me ajudar?

1 resposta
por Antônio Evaldo
| 416.9k xp | 636 posts
Alura Scuba Team Intrutor e Desenvolvedor de Software

Olá, Allan, tudo bem?

Nos desculpe a demora a responder.

Realmente criamos essa função apenas nessa aula, já que temos dois lugares diferentes do nosso projeto que queremos realizar a mesma funcionalidade.

Então no seu arquivo de funções, você pode criar a seguinte função:

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

E no arquivo buscar-pacientes.js, seu código completo ficará assim:

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 resposta = xhr.responseText;

        var pacientes = JSON.parse(resposta);

        // percorremos o array "pacientes" e chamamos a função "adicionaPacienteNaTabela" para cada paciente
        pacientes.forEach(function(paciente) {
            adicionaPacienteNaTabela(paciente);
        });
    });

    xhr.send();
});

Após fazer a requisição utilizando AJAX, obtemos uma lista de pacientes no array pacientes, em seguida percorremos esse array e adicionamos cada um dos pacientes na tabela utilizando a função adicionaPacienteNaTabela.

E então, para evitar a repetição de código, no arquivo form.js você pode apagar essa linha:

var pacienteTr = montaTr(paciente);

E apagar mais essas duas linhas:

    var tabela = document.querySelector("#tabela-pacientes");

    tabela.appendChild(pacienteTr);

E antes de form.reset(), você adiciona esse código:

adicionaPacienteNaTabela(paciente);

Assim, o código do seu arquivo form.js ficará assim:

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

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

    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 = "";

});

Reforçando, fizemos isso basicamente para evitar repetição de código, criando uma função e a chamando em dois lugares que queiram realizar a mesma funcionalidade.

Espero ter ajudado! Abraços e bons estudos :)