2
votes

Comment puis-je vérifier si mon objet existe dans la carte javascript?

Voici ma carte:

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>');
}

Cela fonctionne bien, mais dans certains cas, obj.category ne se ferme pas. S'il n'existe pas, je veux retourner uniquement:

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

J'ai essayé

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

Le problème est que je ne suis pas en mesure pour créer la variable validate car j'obtiens une erreur de console lorsque je charge la page:

TypeError: obj.category n'est pas défini

Je ne suis pas en mesure de faire la validation, si elle est définie

javascript object validation

4 commentaires

ce qui n'est pas valide

@ashishsingh L'erreur dans la console est TypeError: obj.category est indéfini

obj.category ne se ferme pas - La catégorie n'existe pas pour tous les éléments ou pour certains éléments?

@Prasun Pour tous ou pour aucun

5 Réponses :

2
votes

Simplement dans le modèle littéral, vous pouvez vérifier si obj.category s'il existe en passant le cercle

sinon, passez simplement chaîne vide

changez ceci

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

en ceci

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

4 commentaires

D'accord, merci! Cela fonctionne presque, maintenant la couleur de la bordure ne fonctionne pas

J'aime votre réponse, c'est ce que je recherche, mais il doit y avoir une faute de frappe. Parce que je ne vois plus de couleur

Regardez Maheer Ali Answer. C'est presque la même chose et ça marche

Je pense que parce que vous avez écrit objet au lieu d'obj

1
votes

vous pouvez faire

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

il vérifie si chaque objet a une catégorie

en savoir plus https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

0 commentaires

2
votes

Essayez d'utiliser l'instruction if / else, comme ceci:

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

2 commentaires

Il vous manque return

@SergeK. Vous avez raison. Nous devrions l'attribuer à une nouvelle variable et la retourner comme un nouveau tableau.

3
votes

data.map (obj => obj.category); renverra un tableau qui est véridique.
Vous pouvez utiliser l'opérateur ternaire

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

0 commentaires

1
votes

Un peu bizarre, mais bon, j'ai aussi fait des choses bizarres. La raison du deuxième résultat est qu'il semblait étrange d'avoir nom en dehors de la div . Quoi qu'il en soit, le voici. Si ce n'est pas ce que vous demandez réellement, clarifiez et je mettrai à jour la réponse.

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

0 commentaires