Construir un arreglo de árbol a partir de un arreglo plano en JavaScript

Tengo un archivo JSON complejo que tengo que manejar con JavaScript para hacerlo jerárquico, con el fin de construir posteriormente un árbol. Cada entrada del JSON tiene: id: un id único, parentId: el id del nodo padre (que es 0 si el nodo es una raíz del árbol), level: el nivel de profundidad en el árbol

Los datos json ya están "ordenados". Me refiero a que una entrada tendrá encima de sí un nodo padre o un nodo hermano, y debajo de sí un nodo hijo o un nodo hermano.

Entrada :

{
    "People": [
        {
            "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
        }
    ],
    "Animals": [
        {
            "id": "5",
            "parentId": "0",
            "text": "Dog",
            "level": "1",
            "children": null
        },
        {
            "id": "8",
            "parentId": "5",
            "text": "Puppy",
            "level": "2",
            "children": null
        },
        {
            "id": "10",
            "parentId": "13",
            "text": "Cat",
            "level": "1",
            "children": null
        },
        {
            "id": "14",
            "parentId": "13",
            "text": "Kitten",
            "level": "2",
            "children": null
        },
    ]
}

Salida esperada :

{
    "People": [
        {
            "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
            }
        }

    ],    

    "Animals": [
        {
            "id": "5",
            "parentId": "0",
            "text": "Dog",
            "level": "1",
            "children": 
                {
                    "id": "8",
                    "parentId": "5",
                    "text": "Puppy",
                    "level": "2",
                    "children": null
                }
        },
        {
            "id": "10",
            "parentId": "13",
            "text": "Cat",
            "level": "1",
            "children": 
            {
                "id": "14",
                "parentId": "13",
                "text": "Kitten",
                "level": "2",
                "children": null
            }
        }

    ]
}

Respuesta #1

Hay una solución eficiente si utilizas una búsqueda en un mapa. Si los padres siempre vienen antes que sus hijos, puedes combinar los dos bucles for. Soporta múltiples raíces. Da un error en ramas colgantes, pero se puede modificar para ignorarlas. No requiere una biblioteca de terceros. Hasta donde puedo ver, es la solución más rápida.

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

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

Si te interesa la teoría de la complejidad, esta solución es Θ(n log(n)). La solución de filtro recursivo es Θ(n^2), lo cual puede ser un problema para conjuntos de datos grandes.

Respuesta #2

(BONO1: LOS NODOS PUEDEN o NO ESTAR ORDENADOS)

( BONO2: NO SE NECESITA NINGUNA LIBRERÍA DE TERCEROS, SOLO JS PURO )

(BONUS3: El usuario "Elias Rabl" dice que esta es la solución más eficiente, vea su respuesta abajo)

Aquí está:

const createDataTree = dataset => {
  const hashTable = Object.create(null);
  dataset.forEach(aData => hashTable[aData.ID] = {...aData, childNodes: []});
  const dataTree = [];
  dataset.forEach(aData => {
    if(aData.parentID) hashTable[aData.parentID].childNodes.push(hashTable[aData.ID])
    else dataTree.push(hashTable[aData.ID])
  });
  return dataTree;
};

Aquí hay una prueba, podría ayudarte a entender cómo funciona la solución :

it('creates a correct shape of dataTree', () => {
  const dataSet = [{
    "ID": 1,
    "Phone": "(403) 125-2552",
    "City": "Coevorden",
    "Name": "Grady"
  }, {
    "ID": 2,
    "parentID": 1,
    "Phone": "(979) 486-1932",
    "City": "Chełm",
    "Name": "Scarlet"
  }];

  const expectedDataTree = [{
    "ID": 1,
    "Phone": "(403) 125-2552",
    "City": "Coevorden",
    "Name": "Grady",
    childNodes: [{
      "ID": 2,
      "parentID": 1,
      "Phone": "(979) 486-1932",
      "City": "Chełm",
      "Name": "Scarlet",
      childNodes : []
    }]
  }];

  expect(createDataTree(dataSet)).toEqual(expectedDataTree);
});

Respuesta #3

Como mencionó @Sander, la respuesta de @Halcyon asume un arreglo preordenado, lo siguiente no. (Sin embargo, asume que has cargado underscore.js, aunque podría estar escrito en javascript puro):

Código

// Example usage
var arr = [
    {'id':1 ,'parentid' : 0},
    {'id':2 ,'parentid' : 1},
    {'id':3 ,'parentid' : 1},
    {'id':4 ,'parentid' : 2},
    {'id':5 ,'parentid' : 0},
    {'id':6 ,'parentid' : 0},
    {'id':7 ,'parentid' : 4}
];

unflatten = function( array, parent, tree ){
    tree = typeof tree !== 'undefined' ? tree : [];
    parent = typeof parent !== 'undefined' ? parent : { id: 0 };
        
    var children = _.filter( array, function(child){ return child.parentid == parent.id; });
    
    if( !_.isEmpty( children )  ){
        if( parent.id == 0 ){
           tree = children;   
        }else{
           parent['children'] = children
        }
        _.each( children, function( child ){ unflatten( array, child ) } );                    
    }
    
    return tree;
}

tree = unflatten( arr );
document.body.innerHTML = "<pre>" + (JSON.stringify(tree, null, " "))

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

Requisitos

Se asume que las propiedades 'id' y 'parentid' indican el ID y el ID del padre respectivamente. Debe haber elementos con ID de padre 0, de lo contrario se obtiene un arreglo vacío. Los elementos huérfanos y sus descendientes se 'pierden'

http://jsfiddle.net/LkkwH/1/

Respuesta #4

Usa este enfoque de ES6. Funciona de maravilla

// Data Set
// One top level comment 
const comments = [{
    id: 1,
    parent_id: null
}, {
    id: 2,
    parent_id: 1
}, {
    id: 3,
    parent_id: 1
}, {
    id: 4,
    parent_id: 2
}, {
    id: 5,
    parent_id: 4
}];

const nest = (items, id = null, link = 'parent_id') =>
  items
    .filter(item => item[link] === id)
    .map(item => ({ ...item, children: nest(items, item.id) }));

console.log(
  nest(comments)
)

Respuesta #5

Tuve el mismo problema, pero no podía estar seguro de si los datos estaban ordenados o no. No podía usar una biblioteca de terceros, así que esto es solo Js puro; Los datos de entrada pueden tomarse del ejemplo de @Stephen;

 var arr = [
        {'id':1 ,'parentid' : 0},
        {'id':4 ,'parentid' : 2},
        {'id':3 ,'parentid' : 1},
        {'id':5 ,'parentid' : 0},
        {'id':6 ,'parentid' : 0},
        {'id':2 ,'parentid' : 1},
        {'id':7 ,'parentid' : 4},
        {'id':8 ,'parentid' : 1}
      ];
    function unflatten(arr) {
      var tree = [],
          mappedArr = {},
          arrElem,
          mappedElem;

      // First map the nodes of the array to an object -> create a hash table.
      for(var i = 0, len = arr.length; i < len; i++) {
        arrElem = arr[i];
        mappedArr[arrElem.id] = arrElem;
        mappedArr[arrElem.id]['children'] = [];
      }


      for (var id in mappedArr) {
        if (mappedArr.hasOwnProperty(id)) {
          mappedElem = mappedArr[id];
          // If the element is not at the root level, add it to its parent array of children.
          if (mappedElem.parentid) {
            mappedArr[mappedElem['parentid']]['children'].push(mappedElem);
          }
          // If the element is at the root level, add it to first level elements array.
          else {
            tree.push(mappedElem);
          }
        }
      }
      return tree;
    }

var tree = unflatten(arr);
document.body.innerHTML = "<pre>" + (JSON.stringify(tree, null, " "))

JS Fiddle

Array Plano a Árbol

Respuesta #6

una función más simple lista-a-árbol-lite

npm install list-to-tree-lite

listToTree(list)

fuente :

function listToTree(data, options) {
    options = options || {};
    var ID_KEY = options.idKey || 'id';
    var PARENT_KEY = options.parentKey || 'parent';
    var CHILDREN_KEY = options.childrenKey || 'children';

    var tree = [],
        childrenOf = {};
    var item, id, parentId;

    for (var i = 0, length = data.length; i < length; i++) {
        item = data[i];
        id = item[ID_KEY];
        parentId = item[PARENT_KEY] || 0;
        // every item may have children
        childrenOf[id] = childrenOf[id] || [];
        // init its children
        item[CHILDREN_KEY] = childrenOf[id];
        if (parentId != 0) {
            // init its parent's children object
            childrenOf[parentId] = childrenOf[parentId] || [];
            // push it into its parent's children object
            childrenOf[parentId].push(item);
        } else {
            tree.push(item);
        }
    };

    return tree;
}

jsfiddle

Respuesta #7

Puedes manejar esta pregunta con solo dos líneas de código:

flatArray.forEach(f=>
       {f.nodes=flatArray.filter(g=>g.parentId===f.id)});
var resultArray=flatArray.filter(f=>f.parentId==null);

var flatArray =
    [{
        id: 1, parentId: null, text: "parent1"
    }
        , {
        id: 2, parentId: null, text: "parent2"
    }
        ,
    {
        id: 3, parentId: 1, text: "childId3Parent1"
    }
        ,
    {
        id: 4, parentId: 1, text: "childId4Parent1"
    }
        ,
    {
        id: 5, parentId: 2, text: "childId5Parent2"
    }
        ,
    {
        id: 6, parentId: 2, text: "childId6Parent2"
    }
        ,
    {
        id: 7, parentId: 3, text: "childId7Parent3"
    }
        ,
    {
        id: 8, parentId: 5, text: "childId8Parent5"
    }];
    flatArray.forEach(f=>
           {f.nodes=flatArray.filter(g=>g.parentId===f.id)});

        var resultArray=flatArray.filter(f=>f.parentId==null);
    console.log(resultArray)

No se necesita la biblioteca lodash ahora: @Abed abuSalah

Buena suerte