1
resposta

Linha em Branco aparece antes de mostrar os pacientes

Olá a todos, estou tendo o seguinte problema:

Eu consigo buscar a tabela da API, no entanto antes de ela importar aparece uma linha vazia:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Gostaria que essa linha vazia fosse excluída, e ficasse que nem o do professor, segue o código abaixo:

form.js

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 = validarPaciente(paciente);
        if(erros.length >0){ 
            exibeMensagensDeErro(erros);
            return; 
        }

        adicionaPacienteNaTabela(paciente);
        form.reset();

        var mensagemErro = document.querySelector('#mensagem-erro');
        mensagemErro = inner.innerHTML("");        
    });       
    function adicionaPacienteNaTabela(paciente){
        var pacienteTr = montaTr(paciente); 
        var tabela = document.querySelector('#tabela-pacientes');
        tabela.appendChild(pacienteTr);
    }
    function obtemPacienteDoFormulario(form){
    var paciente = { 
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: calcularImc(form.peso.value, form.altura.value)
    }
        return paciente;
} 
function exibeMensagensDeErro(erros){
        var ul = document.querySelector('#mensagem-erro');
        ul.innerHTML = "";    
       erros.forEach(function(erro){ 
        var li= document.createElement('li');
        li.textContent = erro;
        ul.appendChild(li);
      })
    }
    function montaTr(paciente){
        let pacienteTr = document.createElement('tr');
        pacienteTr.appendChild(montarTd(paciente.nome,'info-nome'));
        pacienteTr.appendChild(montarTd(paciente.peso, 'info-peso'));
        pacienteTr.appendChild(montarTd(paciente.altura, 'info-altura'));
        pacienteTr.appendChild(montarTd(paciente.gordura, 'info-gordura'));
        pacienteTr.appendChild(montarTd(paciente.imc, 'info-imc'));
        return pacienteTr;
      }
    function montarTd(dado, classe){ 
    let td = document.createElement('td'); 
    td.textContent = dado;
    td.classList.add(classe); 

    return td;
} 
    function validarPaciente(paciente){
       var erros = []      
        if(!validaPeso(paciente.peso)) erros.push('peso é inválido')        
        if(!validaAltura(paciente.altura)) erros.push('Altura é inválida'); 
        if( paciente.nome.length == 0){
           erros.push('campo Nome em branco');
        }        
        if( paciente.peso.length == 0){
           erros.push('campo Peso em branco');
        }        
        if( paciente.altura.length == 0){
           erros.push('campo Altura em branco');
        }        
        if( paciente.gordura.length == 0){
           erros.push('campo Gordura em branco');
        }        
        return erros;
    }

BuscarPaciente.js:

var botaoAdicionar = document.querySelector('#buscar-pacientes');
botaoAdicionar.addEventListener('click', function(){
    var xhr = new XMLHttpRequest()
    xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes")
    xhr.addEventListener('load', function(){ 
        console.log(xhr.responseText);
        var resposta = xhr.responseText;
        var pacientes = JSON.parse(resposta)
        adicionaPacienteNaTabela(pacientes);
        pacientes.forEach(function(paciente){ 
            adicionaPacienteNaTabela(paciente);
        })    
    })
    xhr.send()
})

Desde já agradeço sua colaboração.

Tenham um ótimo dia!

1 resposta

Olá Rafael, tudo bem com você?

Peço desculpas pela demora em lhe responder.

A adição de uma linha em branco na tabela, está ocorrendo devido à chamada da função adicionaPacienteNaTabela() estar duplicada dentro do evento load da requisição xhr criada dentro do arquivo BuscarPaciente.js.

Na primeira chamada da função adicionaPacienteNaTabela(), está sendo fornecido o array pacientes que contém os dados de todos os pacientes, como essa função espera receber um paciente por vez, não é possível adicionar valores a células (td), fazendo com que seja criado uma linha em branco na tabela.

Para que não seja criado uma linha vazia, no arquivo BuscarPaciente.js localize o evento load da requisição xhr e remova a chamada da função adicionaPacienteNaTabela() que está fora do laço forEach. O código deverá ficar como apresentado abaixo.

var botaoAdicionar = document.querySelector('#buscar-pacientes');
botaoAdicionar.addEventListener('click', function(){
    var xhr = new XMLHttpRequest()
    xhr.open("GET", 'https://raw.githubusercontent.com/loresgarcia/Pacientes-API/master/pacientes.json')
    xhr.addEventListener('load', function(){ 
        console.log(xhr.responseText);
        var resposta = xhr.responseText;
        var pacientes = JSON.parse(resposta)
        pacientes.forEach(function(paciente){ 
            adicionaPacienteNaTabela(paciente);
        })    
    })
    xhr.send()
})

Após realizar a modificação apresentada acima, salve o arquivo BuscarPaciente.js. Abra o arquivo index.html no navegador e clique no botão Buscar pacientes.

Uma observação, atualmente a API utilizada na aula não está mais disponível. Para realizar a requisição dos novos pacientes utilize a seguinte url: https://raw.githubusercontent.com/loresgarcia/Pacientes-API/master/pacientes.json conforme apresentado no código acima.

Espero ter lhe ajudado. Em caso de dúvidas estou à disposição.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!