How to check if variables are filled with strings? and do not show them when empty

Navigation
0

In the final result object, I could have multiple items, sometimes these are not registered, so I'd like to avoid showing on-screen empty tags. Example: 

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>
    ',

In case of company2, delegate2, phone2 and email2 are not filled in, how could I check this to only show tags with filled strings?

    
asked by anonymous 11.07.2018 / 20:14

3 answers

2

You can use the ternary operator that will return the tag and the value if it is not null . If the value is null , it shows nothing: 

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>' : ''}
')
    
11.07.2018 / 20:34
4

You can just verify that the value is valid within a loopback: 

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

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

  return html;
});

So it will only concatenate the HTML code in the output if obj[attr] is valid. This condition, even, you can change as your need. Even if the object receives new fields in the future, the logic does not need to be adapted. As it traverses all fields of the object, it will not matter how many, or what they are.

See working: 

// 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;
}
    
11.07.2018 / 20:49
3

That? 

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

Obviously you need to better define all the rules. And instead of playing a message in the console may want to do something specific, like returning from the function.

If generalizing the action can simplify a bit (now I consider empty invalid too): 

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

Or you can even make a more generic code and even put a function: 

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;
}
    
11.07.2018 / 20:29
Image upload does not work PHP document.getElementById () .value is not working with window.open ()