Boas praticas Javascript - Objeto paciente - outros usos

Oi Fernando, tudo bem? Seria possível sim e até encorajo você a realizar esse feito. É um ótimo desafio hein? Quer tentar e depois mostrar aqui o que conseguiu? Caso tenha problemas, manda pra gente que discutindo a gente chega em uma solução.

Bom, fiz alguns testes, não sei se é o melhor caminho, pois orientação a objetos me confunde um pouco.

Nessa solução, fiquei travado no imc, na realidade até tem solução, mas não era a ideal, pode me dar uma luz?

Desde já muito obrigado.

var pacientes = document.querySelectorAll('.paciente');

for (i=0; i<pacientes.length; i++){
    var paciente = pacientes[i];

function selecionaTdContent(query){
    var td = paciente.querySelector(query);
    return td.textContent;

};
var pacienteZ = {
    nome: selecionaTdContent('.info-nome'),
    peso:selecionaTdContent('.info-peso'),
    altura:selecionaTdContent('.info-altura'),
    gordura:selecionaTdContent('.info-gordura'),
    imc: #DÚVIDA#
};



}

function calculaImc(peso,altura){
    var imc = 0;
    imc = peso / (altura * altura);

    return imc.toFixed(2);
}

Oi Fernando, desculpa a demora. Acho que você começou bem sim. Pro IMC, você pode usar o que o objeto já tem, ou seja, suas propriedades. Veja como poderia ser feito:

var pacienteZ = {
    nome: selecionaTdContent('.info-nome'),
    peso: selecionaTdContent('.info-peso'),
    altura: selecionaTdContent('.info-altura'),
    gordura: selecionaTdContent('.info-gordura'),
    imc: (this.peso / (this.altura * this.altura)).toFixed(2)
};

O this, neste caso se refere ao próprio objeto, então você pode usar isso. O cálculo é feito diretamente. Porém, você pode precisar desse IMC em algum outro lugar. Então você pode simplesmente chamar a função mesmo.

var pacienteZ = {
    nome: selecionaTdContent('.info-nome'),
    peso: selecionaTdContent('.info-peso'),
    altura: selecionaTdContent('.info-altura'),
    gordura: selecionaTdContent('.info-gordura'),
    imc: calculaIMC(this.peso, this.altura)
};

O problema agora no seu código atual é: você tem uma declaração de função dentro de um laço. Isso não é bom, a função está sendo redefinida e chamada a cada redefinição a cada iteração do laço. Como você poderia resolver isso?

Pense um pouco, depois eu volto pra gente continuar a evoluir isso.

Dicas:

• O ideal é que o laço execute a função várias vezes sem ser redefinida.
• E se você criasse uma função que recebe o TR paciente e retornasse o objeto já criado. Não seria melhor? Como poderia resolver isso? - Observe que se fizer isso, no laço você precisaria executar apenas duas funções, uma que seleciona a tr paciente, e outra que cria o objeto paciente.

Boa tarde, demorei para ver e já surgiram outras mil duvidas, rs. Existe alguma forma mais rápida de tirar duvidas? emails, chat, whats etc?

Muito Obrigado.

Fernando, infelizmente só usamos emails em casos muito específicos e depende muito de quem está respondendo no caso eu..., a gente procura resolver por aqui mesmo por que fica compartilhado para outros alunos acompanharem. Você pode listar suas dúvidas aqui, e a gente vai resolvendo. Tá bem?

Vamos continuar por aqui mesmo, pelo menos por enquanto, lista suas dúvidas aqui.

Ok, vamos a uma duvida atual, eu quis tentar adicionar uma nova coluna na tabela com o texto 'Deletar'. Para os contatos já existentes na tabela, funciona perfeitamente, porém para os pacientes que adiciona via form, é criada a td, porém sem conteúdo algum. Segue código:

// remover-pacientes.js
var pacientes = document.querySelectorAll('.paciente');

pacientes.forEach(function(paciente){

    var novaTd = montaTd();
    paciente.appendChild(novaTd)


});



function montaTd(){
    var novaTd = document.createElement('td');
    novaTd.textContent = 'Deletar';
    novaTd.classList.add('deletar');

    return novaTd;
}



var deletas = document.querySelectorAll('.deletar');

for(var i = 0; i<deletas.length; i++){
     var deleta = deletas[i];
        deleta.addEventListener('dblclick',function(event){
            event.target.parentNode.remove();
        });




}

// form.js

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"));
    pacienteTr.appendChild(montaTd());


    return pacienteTr;
}

Fernando, pelo que eu vejo e lembro do projeto você tem uma função montaTr no form.js, e você definiu outra no remove-pacientes.js. Lembre-se que se duas funções tiverem o mesmo nome dentro do mesmo contexto, uma vai sobrescrever a outra. É o que está acontecendo de certa forma.

Neste caso, você não precisa criar uma nova função para criar uma td com a classe deletar e o texto deletar, você pode usar a função que você já tem no form.js que deve ser igual a essa abaixo:

function montaTd(dado, classe) {
    var td = document.createElement("td");
    td.classList.add(classe);
    td.textContent = dado;

    return td;
}

E onde você está montando a tr, em vez de chamar a função sem passar nada, você passa o texto e a classe:

pacienteTr.appendChild(montaTd("deletar", "deletar"));

Pra entender melhor: Você criou uma função que já existia e na execução provavelmente uma sobrescreveu a outra e a segunda, recebia argumentos, no caso o dado e a classe, e você executou a função sem passar essas informações, o que resultou em um td em branco e sem a classe. =)

Testa pra gente? Deu pra entender?

entendi, funcionou, fiz de umas três formas diferentes. Vou colocar as outras duvidas em outros tópicos para manter a organização.

Muito obrigado pela ajuda.

Opa, tudo bem, como preferir. Lembra apenas de marcar o tópico como resolvido no post que tirou sua dúvida, assim os outros alunos conseguem ver de longe se o problema foi resolvido ou não.

Ok, irei fazer, obrigado novamente.