-1

No objeto final de resultado, eu poderia ter vários itens, a algumas vezes estes não estão cadastrados, então eu gostaria de evitar mostrar na tela tags vazias. Exemplo:

mostrador.innerHTML = filtrados.map(
        (obj) => `
        <h4>${obj.cidade}</h4>
        <p>${obj.empresa}</p>
        <p>${obj.representante}</p>
        <p>${obj.telefone}</p>
        <p>${obj.email}</p>
        <p>${obj.empresa2}</p>
        <p>${obj.representante2}</p>
        <p>${obj.telefone2}</p>
        <p>${obj.email2}</p>
    `,

No caso de empresa2, representante2, telefone2 e email2 não estarem preenchidos, como eu poderia verificar isso para mostrar apenas as tags com strings preenchidas?

2
  • Tente assim: ${obj.empresa2 || ''}
    – Sam
    11/07/2018 às 18:26
  • 1
    @dvd só não dá para fazer isso dentro do elemento <p>, pois ele ainda ocupará o espaço na tela, mesmo vazio.
    – Woss
    11/07/2018 às 18:32

3 Respostas 3

4

Você pode apenas verificar se o valor é válido dentro de um laço de repetição:

const filtered = objects.map(obj => {
  let html = '';

  for (let attr in obj) {
     if (obj[attr]) {
        html += `<p>${obj[attr]}</p>`
     }
  }

  return html;
});

Assim, ele só concatenará o código HTML na saída se obj[attr] for válido. Esta condição, inclusive, você pode alterar conforme sua necessidade. Inclusive, se o objeto receber novos campos futuramente, a lógica não precisará ser adaptada. Como ele percorre todos os campos do objeto, não importará quantos são, nem quais são.

Veja funcionando:

// Lista de objetos da aplicação
const objects = [
  {
    empresa: 'Empresa 1',
    representante: 'Foo',
    telefone: '(00) 0000-0000',
    email: '[email protected]',
    empresa2: 'Empresa 1 - 2',
    representante2: null,
    telefone2: null,
    email2: null
  }, {
    empresa: 'Empresa 2',
    representante: 'Foo',
    telefone: '(00) 0000-0000',
    email: '[email protected]',
    empresa2: 'Empresa 2 - 2',
    representante2: null,
    telefone2: '(11) 1111-1111',
    email2: null
  }
];

// Filtra os atributos nulos e constrói o HTML de cada objeto
const filtered = objects.map(obj => {
  let html = '';
  
  for (let attr in obj) {
     if (obj[attr]) {
        html += `<p>${obj[attr]}</p>`
     }
  }
  
  return html;
});

// Exibe o HTML dos objetos na página
for (let obj of filtered) {
  document.body.innerHTML += obj;
}

1
  • 1
    +1 - esta é a resposta que escala melhor e não é dependente de escrever as propriedades e condições "à mão"
    – Sergio
    11/07/2018 às 21:33
4

Isso?

var obj = { cidade : undefined, estado : "", cep : "123" };
if (obj.cidade === undefined) console.log("cidade não tem valor");
if (obj.empresa === undefined) console.log("estado não tem valor");
if (obj.representante === undefined) console.log("cep não tem valor");

Obviamente precisa definir melhor todas as regras. E em vez de jogar uma mensagem no console pode querer fazer algo específico, como retornar da função.

Se generalizar a ação pode simplificar um pouco (agora considero vazio inválido também):

var obj = { cidade : "abc", estado : "", cep : "123" };
if (obj.cidade === undefined || obj.cidade === "" ||
    obj.empresa === undefined || obj.empresa === "" ||
    obj.representante === undefined || obj.representante === "") console.log("algum campo não tem valor");

Ou ainda pode fazer um código mais genérico ainda e até colocar um uma função:

var obj = { cidade : undefined, estado : "", cep : "123" };
if (temCampoInvalido(obj)) console.log("algum campo não tem valor");
var obj = { cidade : "cidade", estado : "", cep : "123" };
if (temCampoInvalido(obj)) console.log("algum campo não tem valor");

function temCampoInvalido(obj) {
    for (var value of Object.values(obj)) if (value === undefined) return true;
    return false;
}

Coloquei no GitHub para referência futura.

2

Pode usar o operador ternário que retornará a tag e o valor caso não seja null. Se o valor for null, não mostra nada:

mostrador.innerHTML = filtrados.map(
        (obj) => `
        <h4>${obj.cidade}</h4>
        <p>${obj.empresa}</p>
        <p>${obj.representante}</p>
        <p>${obj.telefone}</p>
        <p>${obj.email}</p>
        ${obj.empresa2 ? '<p>'+obj.empresa2+'</p>' : ''}
        ${obj.representante2 ? '<p>'+obj.representante2+'</p>' : ''}
        ${obj.telefone2 ? '<p>'+obj.telefone2+'</p>' : ''}
        ${obj.email2 ? '<p>'+obj.email2+'</p>' : ''}
`)
1
  • todas as sugestões são válidas e enriqueceram meu conhecimento, porém esta é a que melhor atende a minha necessidade neste caso específico uma vez que já tenho uma array imensa com centenas de objetos e o que eu precisava era de uma solução que evitasse ter que editar centenas de linhas. Obrigado a todos!
    – Rafa Kunz
    12/07/2018 às 14:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .