Comment filtrer les objets imbriqués dans les tableaux JavaScript et conserver uniquement les éléments correspondants ?

Filtrage de tableaux basé sur des objets imbriqués

En JavaScript, vous pouvez rencontrer des scénarios dans lesquels vous devez filtrer un tableau d'objets en fonction des valeurs de propriétés imbriquées. Pour y parvenir, vous pouvez exploiter de puissantes techniques de filtrage.

Considérez l'exemple fourni dans votre question, où l'objectif est de filtrer un tableau d'éléments en fonction d'une valeur de nom de famille spécifique dans leur tableau "subElements" imbriqué. Le tableau d'entrée est défini comme suit :

<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>

Pour filtrer ce tableau et récupérer uniquement les éléments dont le tableau "subElements" contient un objet avec "nom" défini sur 1, vous pouvez utiliser une combinaison du " filter" et "some" méthodes :

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

Cependant, le problème avec cette approche est qu'elle renvoie les objets avec tous leurs "sous-éléments", y compris ceux qui ne correspondent pas aux critères de filtre. Pour résoudre ce problème, vous pouvez utiliser la fonction "map" avec l'opérateur de propagation :

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

Ici, l'opérateur de propagation (c'est-à-dire "...élément") est utilisé pour créer un nouvel objet basé sur sur l'"élément" d'origine tout en remplaçant sa propriété "subElements" par le résultat filtré. Cette approche vous permet de filtrer les « sous-éléments » indésirables tout en préservant la structure du tableau d'origine. Le "filteredArray" résultant contiendra les objets souhaités avec leurs "subElements" filtrés en fonction du critère "nom" :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!