Home >Web Front-end >JS Tutorial >How to Filter Nested Objects in JavaScript Arrays and Keep Only Matching Elements?

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

Barbara Streisand
Barbara StreisandOriginal
2024-10-28 16:10:08915browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn