How to Filter Nested Objects in JavaScript Arrays and Keep Only Matching Elements?

Filtering Arrays based on Nested Objects

In JavaScript, you may encounter scenarios where you need to filter an array of objects based on the values of nested properties. To achieve this, you can leverage powerful filtering techniques.

Consider the example provided in your question, where the goal is to filter an array of elements based on a specific surname value within their nested "subElements" array. The input array is defined as follows:

<code class="js">let arrayOfElements = [
    {
       "name": "a",
       "subElements": [
          {"surname": 1},
          {"surname": 2}
       ]
    },
    {
       "name": "b",
       "subElements": [
          {"surname": 3},
          {"surname": 1}
       ]
    },
    {
       "name": "c",
       "subElements": [
          {"surname": 2},
          {"surname": 5}
       ]
    }
];</code>

To filter this array and retrieve only the elements whose "subElements" array contains an object with "surname" set to 1, you can use a combination of the "filter" and "some" methods:

<code class="js">let filteredArray = arrayOfElements.filter((element) => element.subElements.some((subElement) => subElement.surname === 1));</code>

However, the issue with this approach is that it returns objects with all their "subElements", including those that don't match the filter criteria. To resolve this, you can employ the "map" function along with the spread operator:

<code class="js">filteredArray = arrayOfElements.map((element) => {
  return {...element, subElements: element.subElements.filter((subElement) => subElement.surname === 1)}
})</code>

Here, the spread operator (i.e., "...element") is used to create a new object based on the original "element" while overriding its "subElements" property with the filtered result. This approach allows you to filter out unwanted "subElements" while preserving the structure of the original array. The resulting "filteredArray" will contain the desired objects with their "subElements" filtered based on the "surname" criterion:

<code class="js">[
    {
        "name": "a",
        "subElements": [
           {"surname": 1}
        ]
    },
    {
        "name": "b",
        "subElements": [
           {"surname": 1}
        ]
    }
]</code>

The above is the detailed content of How to Filter Nested Objects in JavaScript Arrays and Keep Only Matching Elements?. For more information, please follow other related articles on the PHP Chinese website!