Constructing a hierarchical tree structure using an array of objects that are initially flat

Question

Constructing a hierarchical tree structure using an array of objects that are initially flat

My goal is to create a hierarchical tree structure from a flat array:

The original flat array looks like this:

nodes = [
    {id: 1, pid: 0, name: "kpittu"},
    {id: 2, pid: 0, name: "news"},
    {id: 3, pid: 0, name: "menu"},
    {id: 4, pid: 3, name: "node"},
    {id: 5, pid: 4, name: "subnode"},
    {id: 6, pid: 1, name: "cace"}
];

Note: id refers to node id and pid refers to parent node id.

The desired output should look like this:

nodes = [{
    id: 1,
    name: 'kpittu',
    childs: [{
        id: 6,
        name: 'cace'
    }]
}, {
    id: 2,
    name: 'news'
}, {
    id: 3,
    name: 'menu',
    childs: [{
        id: 4,
        name: 'node',
        childs: [{
            id: 5,
            name: 'subnode'
        }]
    }]
}];

I initially attempted to use a recursive function to achieve the desired outcome, but I am open to exploring alternative solutions. Thank you for your input.

javascript angular typescript

Answer 1

Answer №1

One approach is to utilize a hash table and consider id and pid as linked nodes within each iteration.

This solution is effective even when dealing with unsorted data.

var nodes = [{ id: 6, pid: 1, name: "cace" }, { id: 1, pid: 0, name: "kpittu" }, { id: 2, pid: 0, name: "news" }, { id: 3, pid: 0, name: "menu" }, { id: 4, pid: 3, name: "node" }, { id: 5, pid: 4, name: "subnode" }], tree = function (data, root) { var r = [], o = {}; data.forEach(function (a) { if (o[a.id] && o[a.id].children) { a.children = o[a.id] && o[a.id].children; } o[a.id] = a; if (a.pid === root) { r.push(a); } else { o[a.pid] = o[a.pid] || {}; o[a.pid].children = o[a.pid].children...
    
console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

One approach is to utilize a hash table and consider id and pid as linked nodes within each iteration.

This solution is effective even when dealing with unsorted data.

var nodes = [{ id: 6, pid: 1, name: "cace" }, { id: 1, pid: 0, name: "kpittu" }, { id: 2, pid: 0, name: "news" }, { id: 3, pid: 0, name: "menu" }, { id: 4, pid: 3, name: "node" }, { id: 5, pid: 4, name: "subnode" }], tree = function (data, root) { var r = [], o = {}; data.forEach(function (a) { if (o[a.id] && o[a.id].children) { a.children = o[a.id] && o[a.id].children; } o[a.id] = a; if (a.pid === root) { r.push(a); } else { o[a.pid] = o[a.pid] || {}; o[a.pid].children = o[a.pid].children...
    
console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

An alternative approach is to utilize the Map object, which was introduced in ES6.

let nodes = [
  { id: 1, pid: 0, name: "kpittu" },
  { id: 2, pid: 0, name: "news" },
  { id: 3, pid: 0, name: "menu" },
  { id: 4, pid: 3, name: "node" },
  { id: 5, pid: 4, name: "subnode" },
  { id: 6, pid: 1, name: "cace" }
];

function createTree(arr) {
  let arrMap = new Map(arr.map(item => [item.id, item]));
  let tree = [];

  for (let i = 0; i < arr.length; i++) {
    let item = arr[i];

    if (item.pid) {
      let parentItem = arrMap.get(item.pid);

      if (parentItem) {
        let { children } = parentItem;

        if (children) {
          parentItem.children.push(item);
        } else {
          parentItem.children = [item];
        }
      }
    } else {
      tree.push(item);
    }
  }

  return tree;
}

let treeStructure = createTree(nodes);

console.log(treeStructure);

https://codesandbox.io/s/sparkling-feather-r6j3v?fontsize=14&hidenavigation=1&theme=dark

Answer 4

An alternative approach is to utilize the Map object, which was introduced in ES6.

let nodes = [
  { id: 1, pid: 0, name: "kpittu" },
  { id: 2, pid: 0, name: "news" },
  { id: 3, pid: 0, name: "menu" },
  { id: 4, pid: 3, name: "node" },
  { id: 5, pid: 4, name: "subnode" },
  { id: 6, pid: 1, name: "cace" }
];

function createTree(arr) {
  let arrMap = new Map(arr.map(item => [item.id, item]));
  let tree = [];

  for (let i = 0; i < arr.length; i++) {
    let item = arr[i];

    if (item.pid) {
      let parentItem = arrMap.get(item.pid);

      if (parentItem) {
        let { children } = parentItem;

        if (children) {
          parentItem.children.push(item);
        } else {
          parentItem.children = [item];
        }
      }
    } else {
      tree.push(item);
    }
  }

  return tree;
}

let treeStructure = createTree(nodes);

console.log(treeStructure);

https://codesandbox.io/s/sparkling-feather-r6j3v?fontsize=14&hidenavigation=1&theme=dark

Answer 5

Answer №3

Utilize Array#reduce along with a supporting object:

var nodes = [
  {id: 1, pid: 0, name: "kpittu"},
  {id: 2, pid: 0, name: "news"},
  {id: 3, pid: 0, name: "menu"},
  {id: 4, pid: 3, name: "node"},
  {id: 5, pid: 4, name: "subnode"},
  {id: 6, pid: 1, name: "cace"}
];

const helper = nodes.reduce((h, o) => (h[o.id] = Object.assign({}, o), h), Object.create(null));

const tree = nodes.reduce((t, node) => {
  const current = helper[node.id];
  
  if(current.pid === 0) { // check for parent and push to root
    t.push(current);
  } else {
    helper[node.pid].children || (helper[node.pid].children = []) // create children array for parent if not present
    helper[node.pid].children.push(current); // add current item to parent's children array
  }
  
  return t;
}, []);

console.log(tree);

Answer 6

Utilize Array#reduce along with a supporting object:

var nodes = [
  {id: 1, pid: 0, name: "kpittu"},
  {id: 2, pid: 0, name: "news"},
  {id: 3, pid: 0, name: "menu"},
  {id: 4, pid: 3, name: "node"},
  {id: 5, pid: 4, name: "subnode"},
  {id: 6, pid: 1, name: "cace"}
];

const helper = nodes.reduce((h, o) => (h[o.id] = Object.assign({}, o), h), Object.create(null));

const tree = nodes.reduce((t, node) => {
  const current = helper[node.id];
  
  if(current.pid === 0) { // check for parent and push to root
    t.push(current);
  } else {
    helper[node.pid].children || (helper[node.pid].children = []) // create children array for parent if not present
    helper[node.pid].children.push(current); // add current item to parent's children array
  }
  
  return t;
}, []);

console.log(tree);

Constructing a hierarchical tree structure using an array of objects that are initially flat

Answer №1

Answer №2

Answer №3

Similar questions

Error 400: The onCreate Trigger function for Cloud functions is experiencing issues with HTTP requests due to errors in the request

I am experiencing difficulty with the button not responding when clicked, despite trying to implement JavaScript and the Actions syntax

Using Selenium to interact with drop-down lists using div tags instead of select tags

Ways to retrieve element values within Angular

Accessing URL fragments in Next JS with context during the execution of getServerSideProps

Transmit a file using multipart with XMLHttpRequest

Encountering issues with the phaser framework while setting up a server on xampp, faced with errors in javascript and html

Trigger a function in AngularJS when a div is scrolled to within a specific number of pixels from the bottom of the screen

ng-init assign value to a new object

Having difficulty rendering JSON data on an HTML webpage

How can we transfer a jQuery value from an input field without using a single

Mastering MongoDB update functions in JavaScript

AngularJS and TypeScript encountered an error when trying to create a module because of a service issue

In Cypress, I am trying to specifically choose only numerical values from a dropdown menu. However, the list contains a mix of alphanumeric and numeric values

A more effective strategy for avoiding the use of directives or jQuery in AngularJS

Using NicEdit for uploading to your personal server

Modifying the color of a non-active tab - Material UI Tabs

Extracting textual information from Wikipedia through iframes?

How can I access the backend API integrated with Keycloak through Angular?

Toggle JavaScript Query Display