Comment convertir efficacement un tableau plat d'objets JSON en une structure arborescente hiérarchique en JavaScript ?

Conversion d'un tableau plat en une structure arborescente hiérarchique en JavaScript

En JavaScript, nous rencontrons souvent des situations où nous devons organiser les données de manière hiérarchique. Une représentation courante est une structure arborescente, dans laquelle les nœuds sont interconnectés par des relations parent-enfant. Cet article explore une technique efficace pour convertir un tableau plat d'objets JSON en une telle structure arborescente hiérarchique.

Description du problème

Étant donné un tableau d'objets JSON, chacun représentant un nœud dans l'arborescence, avec des propriétés telles que "id", "parentId", "level" et "text", nous visons à convertir ce tableau plat en un objet JSON imbriqué où chaque nœud contient un tableau de ses enfants.

Solution

Une approche efficace consiste à utiliser un algorithme de recherche de carte. En créant une carte qui associe « l'identifiant » de chaque nœud à son index correspondant dans le tableau, nous pouvons parcourir efficacement le tableau et construire la structure hiérarchique.

Tout d'abord, nous initialisons la carte et nous assurons que chaque nœud a un tableau "enfants" vide pour stocker ses descendants. Ensuite, nous parcourons le tableau et pour chaque nœud, nous vérifions son « parentId ». Si ce n'est pas "0", nous localisons le nœud parent en utilisant son "id" sur la carte et ajoutons le nœud actuel en tant qu'enfant. Les nœuds avec "parentId" égal à "0" représentent les racines de l'arbre.

Les principaux avantages de cette solution sont son efficacité et sa capacité à gérer plusieurs racines. Il ne s'appuie pas sur des bibliothèques externes et peut gérer les branches pendantes (nœuds enfants sans parent).

Voici un extrait de code JavaScript implémentant cette solution :

function list_to_tree(list) {
  var map = {}, node, roots = [], i;
  
  for (i = 0; i < list.length; i += 1) {
    map[list[i].id] = i; // initialize the map
    list[i].children = []; // initialize the children
  }
  
  for (i = 0; i < list.length; i += 1) {
    node = list[i];
    if (node.parentId !== "0") {
      // if you have dangling branches check that map[node.parentId] exists
      list[map[node.parentId]].children.push(node);
    } else {
      roots.push(node);
    }
  }
  return roots;
}

Utilisation de l'exemple d'entrée fourni , la fonction générera la sortie hiérarchique attendue, comme démontré dans l'exemple ci-dessous :

var 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
      }
    ];

console.log(list_to_tree(entries));

Cette approche fournit une solution simple et efficace pour créer des structures arborescentes hiérarchiques à partir de tableaux plats, répondant aux exigences de vos besoins de gestion et de visualisation de données.

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!