Comment créer efficacement une structure arborescente hiérarchique à partir d'un tableau plat en JavaScript ?

Création d'une structure arborescente hiérarchique à partir d'un tableau plat en JavaScript

Introduction

En JavaScript, travailler avec des données hiérarchiques est indispensable pour diverses applications, comme la création d'arborescences ou de menus de navigation. Lorsque les données sont stockées dans un tableau plat, il devient nécessaire de les transformer en une structure hiérarchique pour faciliter la manipulation et la visualisation des données. Cet article présentera une méthode efficace pour créer un tableau arborescent à partir d'un tableau plat en JavaScript.

Problème

Étant donné un fichier JSON complexe composé d'objets avec les propriétés suivantes :

• id : Identifiant unique
• parentId : ID du nœud parent (0 pour root nœuds)
• niveau : Profondeur du nœud dans l'arborescence

La tâche consiste à convertir la structure JSON plate en une structure arborescente hiérarchique avec des objets imbriqués représentant les relations parent-enfant.

Solution

La solution exploite une approche de recherche sur carte pour construire efficacement le structure arborescente hiérarchique. L'algorithme comporte deux étapes :

1. Créer une carte pour indexer des objets :

   • Parcourir le tableau plat et créer une carte où les clés sont les propriétés id et les valeurs sont le tableau correspondant indices.

2. Construisez la structure arborescente :

   • Parcourez à nouveau le tableau plat :

     • Pour chaque objet, récupérez l'index de son parent sur la carte à l'aide du parentId.
     • Si le parent existe (pas racine), ajoutez l'objet actuel en tant qu'enfant à son parent.
     • Si le parent n'existe pas, c'est un nœud racine et doit être ajouté au nœud racine tableau.

Exemple

Considérez le tableau JSON plat suivant :

const entries = [{
  "id": "12",
  "parentId": "0",
  "text": "Man",
  "level": "1",
  "children": null
},
{
  "id": "6",
  "parentId": "12",
  "text": "Boy",
  "level": "2",
  "children": null
},
{
  "id": "7",
  "parentId": "12",
  "text": "Other",
  "level": "2",
  "children": null
},
{
  "id": "9",
  "parentId": "0",
  "text": "Woman",
  "level": "1",
  "children": null
},
{
  "id": "11",
  "parentId": "9",
  "text": "Girl",
  "level": "2",
  "children": null
}];

L'application de l'algorithme ci-dessus à ce tableau plat produira l'arborescence hiérarchique suivante structure :

const result = [
{
  "id": "12",
  "parentId": "0",
  "text": "Man",
  "level": "1",
  "children": [
    {
      "id": "6",
      "parentId": "12",
      "text": "Boy",
      "level": "2",
      "children": null
    },
    {
      "id": "7",
      "parentId": "12",
      "text": "Other",
      "level": "2",
      "children": null
    }
  ]
},
{
  "id": "9",
  "parentId": "0",
  "text": "Woman",
  "level": "1",
  "children":
  {
    "id": "11",
    "parentId": "9",
    "text": "Girl",
    "level": "2",
    "children": null
  }
}
];

Conclusion

L'algorithme présenté fournit un moyen efficace de convertir un tableau plat de données hiérarchiques en un tableau arborescent structuré en JavaScript. Cette approche exploite une recherche sur carte pour optimiser le processus et prend en charge plusieurs nœuds racines. Il est idéal pour les situations où vous devez créer des structures arborescentes à partir de données complexes pour une manipulation ou une visualisation ultérieure.

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!