Как вернуть список с данными из одного массива, отфильтрованного другим массивом

Question

Я получаю два массива от двух разных API.У одного из них есть полный список «Предметов», у другого - список некоторых из «Предметов».В реальных словах это может быть как «Предметы, которые я уже упаковал из всех предметов, которые мне нужно упаковать».Итак, мне нужно вернуть список упакованных элементов, а также список всех оставшихся элементов (полный список за вычетом уже упакованного списка).

const packedItems = [
  {
  "id": 03,
  "name": "Car",
    "color": {
      "inside": "grey",
      "outside": "blue"
    }
  },{
  "id": 07,
  "name": "Bike",
    "color": {
      "inside": null,
      "outside": "blue"
    }
  },
]

const allItems = [
  {
  "id": 01,
  "name": "Skateboard",
    "color": {
      "inside": "grey",
      "outside": "brown"
    }
  },{
  "id": 02,
  "name": "TV",
    "color": {
      "inside": "multiclolor",
      "outside": "black"
    }
  },{
  "id": 03,
  "name": "Car",
    "color": {
      "inside": "grey",
      "outside": "blue"
    }
  },{
  "id": 04,
  "name": "Pan",
    "color": {
      "inside": "grey",
      "outside": "black"
    }
  },{
  "id": 05,
  "name": "T-shirt",
    "color": {
      "inside": null,
      "outside": "white"
    }
  },{
  "id": 06,
  "name": "Helmet",
    "color": {
      "inside": "black",
      "outside": "black"
    }
  },{
  "id": 07,
  "name": "Bike",
    "color": {
      "inside": null,
      "outside": "blue"
    }
  },{
  "id": 08,
  "name": "Dryer",
    "color": {
      "inside": "white",
      "outside": "white"
    }
  },
]

Ожидается, что будет два HTML UL: один с уже упакованными элементамии еще один с остальными предметами, которые необходимо упаковать.

Answer 1

Я бы преобразовал ваш список упакованных предметов в простой список идентификаторов.Тогда вы можете довольно просто отфильтровать список allItems.

const packedItemIds = packedItems.map(item => item.id);
const remainingItems = allItems.filter(item => {
  return !packedItemIds.some(id => id === item.id);
});

Answer 2

Итак, вы хотите разделить массив на две группы, в зависимости от того, включен ли идентификатор в список упакованных элементов. Я бы предложил написать функцию, которая разделяет массив на основе произвольного предиката, и передать ему предикат, который определяет, есть ли у тестируемого элемента идентификатор в конкретном списке. Это может выглядеть так:

const partition = (fn, xs) => xs .reduce (
  ([yes, no], x) => fn (x) ? [ [...yes, x], no ] : [ yes, [...no, x] ],
  [ [], [] ]
)
const hasId = (xs) => ({id}) => 
  xs .some ( ({id: pid}) => id === pid )

const partitionItems = (yes) => (maybe) => 
  partition (hasId (yes), maybe)

const allItems = [{"color": {"inside": "grey", "outside": "brown"}, "id": 1, "name": "Skateboard"}, {"color": {"inside": "multiclolor", "outside": "black"}, "id": 2, "name": "TV"}, {"color": {"inside": "grey", "outside": "blue"}, "id": 3, "name": "Car"}, {"color": {"inside": "grey", "outside": "black"}, "id": 4, "name": "Pan"}, {"color": {"inside": null, "outside": "white"}, "id": 5, "name": "T-shirt"}, {"color": {"inside": "black", "outside": "black"}, "id": 6, "name": "Helmet"}, {"color": {"inside": null, "outside": "blue"}, "id": 7, "name": "Bike"}, {"color": {"inside": "white", "outside": "white"}, "id": 8, "name": "Dryer"}]
const packedItems = [{"color": {"inside": "grey", "outside": "blue"}, "id": 3, "name": "Car"}, {"color": {"inside": null, "outside": "blue"}, "id": 7, "name": "Bike"}]

console .log (
  partitionItems (packedItems) (allItems)
)

Здесь partition - это многократно используемая функция, а hasId также может использоваться многократно.

Каждая функция проста, и каждая выполняет свою работу.