Je me demandais simplement la meilleure façon d'aborder cela en JavaScript en utilisant ES6.
En utilisant les données suivantes:
[
{id: 19993, name: "item 1"},
{id: 99737, name: "item 3"}
]
J'essaye de créer un nouveau tableau d'éléments pour chaque catégorie, en fonction des ID inclus dans le tableau categories.items.
Donc, pour la catégorie 1, le résultat doit être:
categories: [
{id: 1,name: "category 1",items: [19993, 99737]},
{id: 2,name: "category 2",items: [70264, 65474, 07078]},
{id: 3,name: "category 3",items: [76765]}
]
items: [
{id: 19993, name: "item 1"},
{id: 70264, name: "item 2"},
{id: 99737, name: "item 3"},
{id: 65474, name: "item 4"},
{id: 76765, name: "item 5"},
{id: 07078, name: "item 6"}
]
I savez-vous que je peux le faire avec un tas de boucles, en poussant dans un tableau, mais je me demandais s'il y avait un moyen ES6 plus court pour y parvenir?
Merci
4 Réponses :
Créez une Carte par élément id hors du tableau items . Utilisez Array.map () pour parcourir le tableau categories . Pour chaque catégorie, créez un nouvel objet à l'aide de propagation d'objets , et remplissez le tableau d'éléments à partir de la carte:
const categories = [{"id":1,"name":"category 1","items":[19993,99737]},{"id":2,"name":"category 2","items":[70264,65474,7078]},{"id":3,"name":"category 3","items":[76765]}]
const items = [{"id":19993,"name":"item 1"},{"id":70264,"name":"item 2"},{"id":99737,"name":"item 3"},{"id":65474,"name":"item 4"},{"id":76765,"name":"item 5"},{"id":7078,"name":"item 6"}]
const itemsMap = new Map(items.map(o => [o.id, o]))
const result = categories.map(o => ({
...o,
items: o.items.map(id => itemsMap.get(id))
}))
console.log(result)
Vous pouvez trouver la catégorie et les éléments.
.as-console-wrapper { max-height: 100% !important; top: 0; }
function getItemsByCategory(id) {
var category = categories.find(o => o.id === id);
if (category) {
return category.items.map(id => items.find(o => o.id === id));
}
}
var categories = [{ id: 1, name: "category 1", items: [19993, 99737] }, { id: 2, name: "category 2", items: [70264, 65474, 07078] }, { id: 3, name: "category 3", items: [76765] }],
items = [{ id: 19993, name: "item 1" }, { id: 70264, name: "item 2" }, { id: 99737, name: "item 3" }, { id: 65474, name: "item 4" }, { id: 76765, name: "item 5" }, { id: 07078, name: "item 6" }];
console.log(getItemsByCategory(1));
Vous pouvez utiliser réduire , forEach et trouver
Voici l'idée
items .
let categories = [{id: 1,name: "category 1",items: [19993, 99737]},{id: 2,name: "category 2",items: [70264, 65474, 07078]},{id: 3,name: "category 3",items: [76765]}]
let items = [{id: 19993, name: "item 1"},{id: 70264, name: "item 2"},{id: 99737, name: "item 3"}, {id: 65474, name: "item 4"},{id: 76765, name: "item 5"},{id: 07078, name: "item 6"},]
let op = categories.reduce((op, {name, items:cartItems}) => {
cartItems.forEach(key => {
let value = items.find(({id}) => id === key)
if(value){
op[name] = op[name] || []
op[name].push(value)
}
})
return op
},{})
console.log(op)
Vous pouvez le faire succinctement en utilisant Array.prototype.map () , Array.prototype.find () et Array.prototype.filter () :
const categories = [
{id: 1,name: "category 1",items: [19993, 99737]},
{id: 2,name: "category 2",items: [70264, 65474, 07078]},
{id: 3,name: "category 3",items: [76765]}
];
const items = [
{id: 19993, name: "item 1"},
{id: 70264, name: "item 2"},
{id: 99737, name: "item 3"},
{id: 65474, name: "item 4"},
{id: 76765, name: "item 5"},
{id: 07078, name: "item 6"}
];
const result = categories.map(c => ({
...c,
items: c.items.map(id => items.find(i => id === i.id)).filter(Boolean)
}));
console.log(result);
@leaf, génial! :)
Vous demandez le "meilleur moyen" qui générera des réponses principalement basées sur l'opinion (c'est pourquoi il y a déjà trois réponses différentes ...) - ce qui est hors sujet pour SO
Soit dit en passant, «plus court» n'est pas «meilleur». La recherche du code le plus court possible est une approche naïve de la programmation. Pensez aux performances.