JavaScript - новый массив объектов из совпадающих идентификаторов

Question

Мне просто интересно, как лучше всего подойти к этому в JavaScript, используя ES6.

Используя следующие данные:

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"}
]

Я пытаюсь создать новый массив элементов длякаждая категория на основе идентификаторов, включенных в массив category.items.

Таким образом, для категории 1 выходные данные должны быть:

[
    {id: 19993, name: "item 1"},
    {id: 99737, name: "item 3"}
]

Я знаю, что могу сделать это с путаницей циклов, толкаясь в массив, но мне было интересно, есть ли у ES6 более короткий способ добиться этого?

Спасибо

Answer 1

Вы можете сделать это кратко, используя Array.prototype.map(), Array.prototype.find() и 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);

Answer 2

Создать карту по элементу id из массива items. Используйте Array.map() для итерации массива categories. Для каждой категории создайте новый объект, используя распространение объекта , и заполните массив элементов из карты:

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)

Answer 3

Вы можете использовать уменьшить , forEach и найти

Здесь идея

• Сначала для каждого массива элементов в категориях мы находим соответствующий элемент в переменной items.
• Если мы находим соответствующий элемент, мы добавляем его в op, иначе возвращаем op без изменений

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)

Answer 4

Вы можете найти категорию и предметы.

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

.as-console-wrapper { max-height: 100% !important; top: 0; }