How to get Main Array with the Object when filtering a Sub array

I have this array of data, where when I filter the sub-array the orderedItems object key is only filtered not the whole data, This is my code.

const data = [
  {
    id: 6,
    orderedItems: [ { name: "Product A", vendor: 2 }, { name: "Product B", vendor: 2 }, { name: "Product B", vendor: 2 } ]
  },
  {
    id: 5,
    orderedItems: [ { name: "Product Aaa", vendor: 1 }, { name: "Product Bbb", vendor: 1 }, { name: "Product Ccc", vendor: 2 } ]
  }
];
const userId = 1;

const filteredData = data.map(({ id, orderedItems }) => {
  return {
    id: id,
    orderedItems: orderedItems.filter(({ vendor }) => vendor == userId),
  };
});

console.log(JSON.stringify(filteredData, null, 2));

Result:

[
  {
    "id": 6,
    "orderedItems": []
  },
  {
    "id": 5,
    "orderedItems": [ { "name": "Product Aaa", "vendor": 1 }, { "name": "Product Bbb", "vendor": 1 } ]
  }
]

Expected Result:

[
  {
    "id": 5,
    "orderedItems": [ { "name": "Product Aaa", "vendor": 1 }, { "name": "Product Bbb", "vendor": 1 } ]
  }
]

The filter works but only for the orderedItems object key, I wanted the id too outside of the array to be filtered too. Is there any way to do this?, If there any clarification or explanation you need please comment down below. Thanks

Answer

You can use Array#reduce to iterate over the list and in each iteration, compute the filtered orders of the current item, and in case it’s not empty, add it to the accumulator with the current id:

const 
  data = [
    { id: 6, orderedItems: [ { name: "Product A", vendor: 2 }, { name: "Product B", vendor: 2 }, { name: "Product B", vendor: 2 } ] },
    { id: 5, orderedItems: [ { name: "Product Aaa", vendor: 1 }, { name: "Product Bbb", vendor: 1 }, { name: "Product Ccc", vendor: 2 } ] }
  ],
  userId = 1;

const filteredData = data.reduce((filteredItems, { id, orderedItems }) => {
  const itemFilteredOrders = orderedItems.filter(({ vendor }) => vendor == userId);
  if(itemFilteredOrders.length > 0) {
    filteredItems.push({ id, orderedItems: itemFilteredOrders });
  }
  return filteredItems;
}, []);

console.log(JSON.stringify(filteredData, null, 2));

Another way to complete your approach would be to filter the resulting list by the length of orderedItems:

const 
  data = [
    { id: 6, orderedItems: [ { name: "Product A", vendor: 2 }, { name: "Product B", vendor: 2 }, { name: "Product B", vendor: 2 } ] },
    { id: 5, orderedItems: [ { name: "Product Aaa", vendor: 1 }, { name: "Product Bbb", vendor: 1 }, { name: "Product Ccc", vendor: 2 } ] }
  ],
  userId = 1;

const filteredData = data
  .map(({ id, orderedItems }) => ({
    id,
    orderedItems: orderedItems.filter(({ vendor }) => vendor == userId)
  }))
  .filter(({ orderedItems }) => orderedItems.length > 0);

console.log(JSON.stringify(filteredData, null, 2));