Image de l'article 'Extraire des tableaux d'une liste d'objets en un seul tableau'

Extraire des tableaux d'une liste d'objets en un seul tableau

Avez-vous déjà eu besoin de mettre les tableaux d'une liste d'objets dans un seul tableau ? JavaScript fournit une API native pour le faire et c'est simple.

C’est simple : utilisez la méthode Array.prototype.flatMap() en même temps que la décomposition de l’objet.

Par exemple, vous avez ce tableau d’objets. Chaque objet contient un tableau de valeurs primitives :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
"categories": [
    {
      "forums": [
        "-KpOx5Y4AqRr3sB4Ybwj",
        "-KsjO4_W3W9Q2Z2UmuPr"
      ],
      "name": "Feedback & Information",
      "slug": "feedback-and-information",
      "id": "-KpR7vRkiRPpbUd_TVAR"
    },
    {
      "forums": [
        "-KsjPat5MWCx-dkjNVg8",
        "-KsjPjasLh0TFtZmffEo",
        "-Kvd1Vg_ankLYgrxC50F",
        "-KvdCowY9mDvM0EH8Pvs",
        "-KvhkEl6F673igPtnbso"
      ],
      "name": "Discussions",
      "slug": "discussions",
      "id": "-KsjPKA6hDuHlQK_lJWO"
    },
    {
      "forums": [
        "-Kvclvu_Qd9QdS9ciqUl",
        "-KvcmOcppNYK8NCesmB9"
      ],
      "name": "Comedy",
      "slug": "comedy",
      "id": "-KvclpNRjpI5W-j0JQGU"
    }
  ],

Si vous voulez obtenir les valeurs de forums, l’utilisation de la décomposition d’objets et de flatMap vous fournira la solution :

1
const forums = categories.flatMap(({ forums }) => forums);

Le résultat vous donnera :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
[
  "-KpOx5Y4AqRr3sB4Ybwj",
  "-KsjO4_W3W9Q2Z2UmuPr",
  "-KsjPat5MWCx-dkjNVg8",
  "-KsjPjasLh0TFtZmffEo",
  "-Kvd1Vg_ankLYgrxC50F",
  "-KvdCowY9mDvM0EH8Pvs",
  "-KvhkEl6F673igPtnbso",
  "-Kvclvu_Qd9QdS9ciqUl",
  "-KvcmOcppNYK8NCesmB9"
]

Consultez la démo JSFiddle pour vous en convaincre.

Bonne lecture !

Crédit : Photo par Alev Takil sur Unsplash.