0
votes

Obtenir toutes les paires d'objets dans un seul tableau (Javascript)

J'ai un tableau comme celui-ci:

const newArr =[Cat1, Cat2]

Je veux créer un nouveau tableau qui n'a que la catégorie sans paires comme ça:

const arr = [{name: "some", category: "Cat1"}, {name: "else", category: "Cat2"}, {name: "stuff", category: "Cat2"}]

puis mappez dessus pour le rendre dans mon élément JSX. J'ai essayé beaucoup de trucs mais rien n'a fonctionné Merci pour votre aide.

javascript reactjs object arrays jsx

0 commentaires

3 Réponses :

0
votes

Essaye ça

const arr = [
  {name: "some", category: "Cat1"}, 
  {name: "else", category: "Cat2"}, 
  {name: "stuff", category: "Cat2"}
]

const result = arr.map(a=> a.category);
console.log([...new Set(result)]);

1 commentaires

c'est parfait !

0
votes

Vous recherchez quelque chose comme ceci:

const arr = [{name: "some", category: "Cat1"}, {name: "else", category: "Cat2"}, {name: "stuff", category: "Cat2"}];

console.log([...new Set(arr.map(x => x.category))]);

1 commentaires

les deux solutions ont fonctionné Merci beaucoup!

0
votes

L'utilisation de l'approche par set object fixes est la meilleure approche. Comme il est déjà mentionné ici, je vais montrer les autres approches.

Utilisation de l'objet:

Vous pouvez utiliser la méthode Array.prototype.forEach() avec l' Nullish coalescing operator (??) pour faire votre travail.

const arr = [
  { name: 'some', category: 'Cat1' },
  { name: 'else', category: 'Cat2' },
  { name: 'stuff', category: 'Cat2' },
];

const ret = Object.values(
  arr.reduce((prev, c) => {
    const p = prev;
    const key = c.category;
    if (!p[key]) p[key] = c.category;
    return p;
  }, {})
);
console.log(ret);

Utilisation de l'objet de la carte:

L'objet Map stocke les paires valeur / clé avec l'ordre d'insertion d'origine. Bien que l'objet soit similaire à l'objet de la carte, l'objet de la carte fonctionne mieux lorsque vous devez effectuer de nombreux ajouts et suppressions.

const arr = [
  { name: 'some', category: 'Cat1' },
  { name: 'else', category: 'Cat2' },
  { name: 'stuff', category: 'Cat2' },
];
const ret = [];
arr.forEach((x) => {
  if (!ret.includes(x.category)) ret.push(x.category);
});
console.log(ret);

Utilisation de Array:

Array.prototype.includes() méthode Array.prototype.includes() vérifie si le tableau contient l'élément spécifié ou non et renvoie vrai ou faux en fonction de cela.

const arr = [
  { name: 'some', category: 'Cat1' },
  { name: 'else', category: 'Cat2' },
  { name: 'stuff', category: 'Cat2' },
];
const map = new Map();
const ret = [];
arr.forEach((x) => {
  if (!map.has(x.category)) {
    map.set(x.category, true);
    ret.push(x.category);
  }
});
console.log(ret);

En utilisant la méthode de réduction:

Array.prototype.reduce() méthode Array.prototype.reduce() exécute la fonction donnée pour chaque itération et réduit le tableau à une valeur unique.

const arr = [
  { name: 'some', category: 'Cat1' },
  { name: 'else', category: 'Cat2' },
  { name: 'stuff', category: 'Cat2' },
];
const ret = {};
arr.forEach((x) => {
  ret[x.category] = ret[x.category] ?? x.category;
});
console.log(Object.values(ret));

2 commentaires

Quel est le meilleur moyen entre les vôtres et les autres réponses?

@CamilleSylla vérifie maintenant la solution mise à jour.