Как я могу проверить, существует ли мой объект в карте JavaScript?

Question

Это моя карта:

  return (data.map(obj => `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}`)).join('<br>');

Работает хорошо, но в некоторых случаях obj.category не выходит.Если он не существует, я хочу вернуть только:

  return (data.map(obj => `${obj.name}`)).join('<br>');

Я пытался

var validate = data.map(obj => obj.category));

if(validate){
      return (data.map(obj => `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}`)).join('<br>');
} else {
  return (data.map(obj => `${obj.name}`)).join('<br>');
}

Проблема в том, что я не могу создать переменную validate, потому что я получаю консольошибка при загрузке страницы:

TypeError: obj.category не определено

Я не могу выполнить валидацию, если она определена

Answer 1

Немного странно, но эй, я тоже делал странные вещи.Причина второго результата в том, что казалось странным иметь имя вне div .В любом случае, вот оно.Если это не то, что вы на самом деле просите, уточните, и я обновлю ответ.

let data = [
    { name: 'joe', category: { color: 'red' } },
    { name: 'bob', category: { color: 'green' } },
    { name: 'john', category: { color: 'blue' } },
    { name: 'betty' },
    { name: 'jane', category: { color: 'orange' } },
];

let result = (data.map(obj =>
    obj.category && obj.category.color ?
        `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}` :
        obj.name
)).join('<br>\n');

console.log( 'first result' );
console.log(result);

result = (data.map(obj =>
    obj.category && obj.category.color ?
        `<div style="border-color:${obj.category.color}" class="circle">${obj.name}</div>` :
        obj.name
)).join('<br>\n');

console.log( '\nsecond result' );
console.log( result );

Answer 2

data.map(obj => obj.category); вернет массив, который является правдивым.
Вы можете использовать троичный оператор

return (data.map(obj => obj.category ? `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}` : `${obj.name}`)).join('<br>');

Answer 3

вы можете сделать

var validate = data.every(obj => obj.category));

он проверяет, есть ли у каждого объекта категория

подробнее https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

Answer 4

Попробуйте использовать оператор if / else, например:

const myFunc = () => {

  let data = [{
      name: 'abc',
      category: {
        color: 'red'
      }
    },
    {
      name: 'def',
      category: {
        color: 'blue'
      }
    },
    {
      name: 'ghi'
    },
  ];

  let result = (data.map(obj => {
    if (obj.category)
      return `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}`
    else
      return `${obj.name}`
  })).join('<br>');

  console.log(result);
}
myFunc();

Answer 5

Просто в шаблонном литерале вы можете проверить obj.category, если он существует, передать <div style="border-color:${obj.category.color}" class="circle"></div>, если не просто передать empty string

, измените это

return (data.map(obj => `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}`)).join('<br>');

на

return (data.map(obj => `${obj.category ? <div style="border-color:${obj.category.color}" class="circle"></div> : ''}  ${obj.name}`)).join('<br>');