How to filter Nested Array using Key in JavaScript ?

Filtering a nested array in JavaScript involves the process of selectively extracting elements from an array of objects, where each object contains another array. We will discuss how can we filter Nested Array using the key in JavaScript.

Filtering a nested array based on a key in JavaScript can be done using various methods:

Using filter method

The filter method is used to filter the main array based on a condition specified using the same method. The same method checks if at least one element in the nested array meets the given condition. This method directly filters the objects in the main array based on the specified key and value.

Example: This example shows the filtering of a nested array using the key by using the filter method.

Javascript

// data taken
const data = [
    {
        id: 1, items: [{ name: 'item1' },
        { name: 'item2' }]
    },
    {
        id: 2, items: [{ name: 'item3' },
        { name: 'item4' }]
    },
    {
        id: 3, items: [{ name: 'item5' },
        { name: 'item6' }]
    }
];

const keyToFilter = 'name';
const valueToFilter = 'item3';

const filteredData = data.filter(obj =>
    obj.items.some(item => item[keyToFilter] === valueToFilter));

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

Output

[
  {
    "id": 2,
    "items": [
      {
        "name": "item3"
      },
      {
        "name": "item4"
      }
    ]
  }
]

Using reduce method

The reduce() method is applied in this approach to iteratively build a new array that contains only the objects meeting the specified condition. The filter method is used to filter the items in the nested array, and the result is added to the accumulator array.

Example: This example shows the filtering of nested array using the key by using the reduce method.

Javascript

const data = [
  { id: 1, items: [{ name: 'item1' }, { name: 'item2' }] },
  { id: 2, items: [{ name: 'item3' }, { name: 'item4' }] },
  { id: 3, items: [{ name: 'item5' }, { name: 'item6' }] }
];

const keyToFilter = 'name';
const valueToFilter = 'item3';

const filteredData = data.reduce((acc, obj) => {
  const filteredItems = obj.items.filter(item => item[keyToFilter] === valueToFilter);
  if (filteredItems.length > 0) {
    acc.push({ ...obj, items: filteredItems });
  }
  return acc;
}, []);

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

Output

[
  {
    "id": 2,
    "items": [
      {
        "name": "item3"
      }
    ]
  }
]

Using map and filter

The map and filter methods to achieve the desired result. First, the map method is used to iterate over each object in the main array. Then, the filter method is applied to the nested array within each object, isolating only the items that match the specified key and value.

Example: This example shows the filtering of a nested array using the key by using the map and filter method.

Javascript

const data = [
  { id: 1, items: [{ name: 'item1' }, { name: 'item2' }] },
  { id: 2, items: [{ name: 'item3' }, { name: 'item4' }] },
  { id: 3, items: [{ name: 'item5' }, { name: 'item6' }] }
];

const keyToFilter = 'name';
const valueToFilter = 'item3';

const filteredData = data.map(obj => ({
  ...obj,
  items: obj.items.filter(item => item[keyToFilter] === valueToFilter)
})).filter(obj => obj.items.length > 0);

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

Output

[
  {
    "id": 2,
    "items": [
      {
        "name": "item3"
      }
    ]
  }
]