Generating a hierarchical structure in Angular by converting a flat array into a Tree array

Question

Generating a hierarchical structure in Angular by converting a flat array into a Tree array

I am faced with the challenge of creating a tree Array that can be used in the primeng tree component. However, I am receiving a flat array from the backend.

Here is an example of the data I receive:

{name: 'teste', previousName: 'fathername', showOrder: '1', preferredOrder: '2'},
{name: 'teste 2', previousName: 'fathername', showOrder: '1', preferredOrder: '2'},
{name: 'teste 3', previousName: 'teste', showOrder: '1', preferredOrder: '2'},
{name: 'teste 4', previousName: 'teste', showOrder: '1', preferredOrder: '2'},
{name: 'teste 5', previousName: 'teste 3', showOrder: '1', preferredOrder: '2'},
{name: 'teste 6', previousName: 'teste 5', showOrder: '1', preferredOrder: '2'},
]

and I need to transform it into:

[
{label: 'name', data: 'original object', draggable: true, droppable: true, children: []}
]

To achieve this, I attempted to create the desired objects using the following function:

makeTreeNode(array) {
  let arrTreeNode = []
  let treeNodeObj;
  array.filter(element => {
   treeNodeObj = new Tree() //Tree is a class with the desired properties
   treeNodeObj.label = element.name
   treeNodeObj.data = element
   treeNodeObj.draggable = true
   treeNodeObj.droppable = true
   arrTreeNode.push(treeNodeObj)
})

This conversion works, but I am unsure of how to read this new array in order to match objects where the previous name matches the current name and then place them as children nodes.

If anyone has any insights or solutions, please help me out. Thank you!

javascript arrays angular typescript recursion

Answer 1

Answer №1

Let's establish a concrete definition for your array:

const arr: Data[] = [
  { name: 'teste', previousName: 'fathername', showOrder: '1', preferredOrder: '2' },
  { name: 'teste 2', previousName: 'fathername', showOrder: '1', preferredOrder: '2' },
  { name: 'teste 3', previousName: 'teste', showOrder: '1', preferredOrder: '2' },
  { name: 'teste 4', previousName: 'teste', showOrder: '1', preferredOrder: '2' },
  { name: 'teste 5', previousName: 'teste 3', showOrder: '1', preferredOrder: '2' },
  { name: 'teste 6', previousName: 'teste 5', showOrder: '1', preferredOrder: '2' },
]

The array structure is based on the following interface named Data:

interface Data {
  name: string,
  previousName: string,
  showOrder: string;
  preferredOrder: string
}

The objective is to create the makeTreeNode() function with this call signature:

declare function makeTreeNode(array: Data[]): Tree<Data>[];

The generic class Tree is defined like this:

class Tree<T> {
  constructor(
    public label: string,
    public data: T,
    public children: Tree<T>[] = [],
    public draggable = true,
    public droppable = true
  ) { }
}

Here's an approach to implement the makeTreeNode() function:

function makeTreeNode(array: Data[]) {

  // Create a mapping from node name to node:
  const nodeMap: Record<string, Tree<Data>> = {};
  array.forEach(element => 
    nodeMap[element.name] = new Tree(element.name, element)
  );
  
  // Fill in the children nodes
  array.forEach(element =>
    nodeMap[element.previousName]?.children.push(nodeMap[element.name])
  );

  // Return only the nodes without a parent
  return Object.values(nodeMap).filter(n => 
    !(n.data.previousName in nodeMap)
  );  
}

The process involves three steps:

Create a corresponding Tree<Data> node for each Data element and store it in nodeMap. This allows easy access to nodes by their names.
Associate each node with its respective parent by populating the children arrays in the nodes. This step completes the tree structure.
Filter out the root nodes (nodes without parents) and return them as the final result.

Testing the implementation:

function displayTreeNodes(array: Tree<Data>[]): string {
  return "[" + array.map(t => t.label + ": " + displayTreeNodes(t.children)).join(", ") + "]"
}
console.log(displayTreeNodes(rootNodes));
// "[teste: [teste 3: [teste 5: [teste 6: []]], teste 4: []], teste 2: []]"

With two root nodes, we can see that the tree structure is successfully created.

A more optimized version of makeTreeNode() would combine the last two steps as follows:

// Populate children and return array together
const ret: Tree<Data>[] = [];
array.forEach(element =>
  (nodeMap[element.previousName]?.children ?? ret).push(nodeMap[element.name])
);
return ret;

However, the original presentation was provided for clarity in understanding the concepts involved.

Link to Playground for code demo

Answer 2

Let's establish a concrete definition for your array:

const arr: Data[] = [
  { name: 'teste', previousName: 'fathername', showOrder: '1', preferredOrder: '2' },
  { name: 'teste 2', previousName: 'fathername', showOrder: '1', preferredOrder: '2' },
  { name: 'teste 3', previousName: 'teste', showOrder: '1', preferredOrder: '2' },
  { name: 'teste 4', previousName: 'teste', showOrder: '1', preferredOrder: '2' },
  { name: 'teste 5', previousName: 'teste 3', showOrder: '1', preferredOrder: '2' },
  { name: 'teste 6', previousName: 'teste 5', showOrder: '1', preferredOrder: '2' },
]

The array structure is based on the following interface named Data:

interface Data {
  name: string,
  previousName: string,
  showOrder: string;
  preferredOrder: string
}

The objective is to create the makeTreeNode() function with this call signature:

declare function makeTreeNode(array: Data[]): Tree<Data>[];

The generic class Tree is defined like this:

class Tree<T> {
  constructor(
    public label: string,
    public data: T,
    public children: Tree<T>[] = [],
    public draggable = true,
    public droppable = true
  ) { }
}

Here's an approach to implement the makeTreeNode() function:

function makeTreeNode(array: Data[]) {

  // Create a mapping from node name to node:
  const nodeMap: Record<string, Tree<Data>> = {};
  array.forEach(element => 
    nodeMap[element.name] = new Tree(element.name, element)
  );
  
  // Fill in the children nodes
  array.forEach(element =>
    nodeMap[element.previousName]?.children.push(nodeMap[element.name])
  );

  // Return only the nodes without a parent
  return Object.values(nodeMap).filter(n => 
    !(n.data.previousName in nodeMap)
  );  
}

The process involves three steps:

Create a corresponding Tree<Data> node for each Data element and store it in nodeMap. This allows easy access to nodes by their names.
Associate each node with its respective parent by populating the children arrays in the nodes. This step completes the tree structure.
Filter out the root nodes (nodes without parents) and return them as the final result.

Testing the implementation:

function displayTreeNodes(array: Tree<Data>[]): string {
  return "[" + array.map(t => t.label + ": " + displayTreeNodes(t.children)).join(", ") + "]"
}
console.log(displayTreeNodes(rootNodes));
// "[teste: [teste 3: [teste 5: [teste 6: []]], teste 4: []], teste 2: []]"

With two root nodes, we can see that the tree structure is successfully created.

A more optimized version of makeTreeNode() would combine the last two steps as follows:

// Populate children and return array together
const ret: Tree<Data>[] = [];
array.forEach(element =>
  (nodeMap[element.previousName]?.children ?? ret).push(nodeMap[element.name])
);
return ret;

However, the original presentation was provided for clarity in understanding the concepts involved.

Link to Playground for code demo

Generating a hierarchical structure in Angular by converting a flat array into a Tree array

Answer №1

Similar questions

"Troubleshooting issues with the Updater function within the variable context API in React Native

Real-time webpage featuring dynamically updating text sourced from a file

Generate live references to interact with elements

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

Attaching a modal to an entity

The request to http://localhost:3000/cartdata has encountered an internal server error (500) in the isAxiosError.js file at line

Having issues with the toggle display button functionality not working properly in Angular when using click()

Eliminating blank attributes within an array of objects

Validation conditions with ASP.Net Razor Pages

Encountered a new problem post code refactoring: "Error with prop validation: prop failed type check"

The most effective method for transferring asynchronous data to pages in Next.js

From JSON array to object class

Behind the scenes, unable to launch due to Schema Error

Utilize Ajax and Nodejs to inject dynamic content into your webpage

The call stack size has reached its maximum limit;

Is it possible to return a promise after utilizing .then() in AngularJS?

Updating another component when an input value changes in React

The Error Message: "404 Not Found - Your Form Submission Could Not

How can I incorporate a new user interface button into Here Maps?

What is the proper way to specifically define a new property on the `global` object in TypeScript?