Steps to generate an unlimited tree structure using a specified set of data organized by parent ID

Question

Steps to generate an unlimited tree structure using a specified set of data organized by parent ID

I have a collection structured like this:

interface Elm {
  id: number;
  name: string;
  parent?: number;
}

Now, I would like to transform it into the following format:

interface NodeTree {
  id: number;
  name: string;
  children: NodeTree[];
  parent?: number;
}

To achieve this, I need a function that can iterate through an array of elements and organize them into a tree structure.

Here is an example of the given elements:

const elements: Elm[] = [   { id: 1, name: "Hydrogen" },   { id: 2, name: "Helium" },   { id: 3, name: "Lithium" },   ...

How can I generate the output in the form of NodeTree[]?

javascript typescript recursion tree treeview

Answer 1

Answer №1

interface Element {
  identifier: number;
  title: string;
  parentID?: number;
}

interface TreeView {
  id: number;
  name: string;
  childNodes: TreeView[];
  parentID?: number;
}

const elementsList: Element[] = [
  { identifier: 1, title: "Hydrogen" },
  { identifier: 2, title: "Helium" },
  { identifier: 3, title: "Lithium" },
  { identifier: 4, title: "Beryllium" },
  // Add more elements
];

const treeNodes: TreeView[] = [];

const createTreeNode = (element: Element) => {
  const treeNode: TreeView = {
    id: element.identifier,
    name: element.title,
    childNodes: [],
    parentID: element.parentID
  };
  return treeNode;
};

const fillElementsInNode = (elements: Element[], treeNode: TreeView) => {
  elements.forEach(element => {
    if (element.parentID === treeNode.id) {
      const childNode = treeNode.childNodes.find(
        (child: TreeView) => child.id === element.identifier
      );

      if (!childNode) {
        treeNode.childNodes.push(createTreeNode(element));
      }
    }
  });
};

const fillTreeView = (elements: Element[], treeNode: TreeView) => {
  fillElementsInNode(elements, treeNode);

  if (treeNode.childNodes.length > 0) {
    treeNode.childNodes.forEach(node => {
      fillElementsInNode(elements, node);
      fillTreeView(elements, node);
    });
  }
};

elementsList.forEach(element => {
  if (!element.parentID) {
    const rootTreeNode: TreeView = createTreeNode(element);
    fillTreeView(elementsList, rootTreeNode);
    treeNodes.push(rootTreeNode);
  }
});

console.table(treeNodes);
console.log("🚩");
console.table(treeNodes[0].childNodes);
console.log("🚩");
console.table(treeNodes[0].childNodes[0].childNodes);
console.log("🚩");
console.table(treeNodes[0].childNodes[0].childNodes[0].childNodes);

Answer 2

interface Element {
  identifier: number;
  title: string;
  parentID?: number;
}

interface TreeView {
  id: number;
  name: string;
  childNodes: TreeView[];
  parentID?: number;
}

const elementsList: Element[] = [
  { identifier: 1, title: "Hydrogen" },
  { identifier: 2, title: "Helium" },
  { identifier: 3, title: "Lithium" },
  { identifier: 4, title: "Beryllium" },
  // Add more elements
];

const treeNodes: TreeView[] = [];

const createTreeNode = (element: Element) => {
  const treeNode: TreeView = {
    id: element.identifier,
    name: element.title,
    childNodes: [],
    parentID: element.parentID
  };
  return treeNode;
};

const fillElementsInNode = (elements: Element[], treeNode: TreeView) => {
  elements.forEach(element => {
    if (element.parentID === treeNode.id) {
      const childNode = treeNode.childNodes.find(
        (child: TreeView) => child.id === element.identifier
      );

      if (!childNode) {
        treeNode.childNodes.push(createTreeNode(element));
      }
    }
  });
};

const fillTreeView = (elements: Element[], treeNode: TreeView) => {
  fillElementsInNode(elements, treeNode);

  if (treeNode.childNodes.length > 0) {
    treeNode.childNodes.forEach(node => {
      fillElementsInNode(elements, node);
      fillTreeView(elements, node);
    });
  }
};

elementsList.forEach(element => {
  if (!element.parentID) {
    const rootTreeNode: TreeView = createTreeNode(element);
    fillTreeView(elementsList, rootTreeNode);
    treeNodes.push(rootTreeNode);
  }
});

console.table(treeNodes);
console.log("🚩");
console.table(treeNodes[0].childNodes);
console.log("🚩");
console.table(treeNodes[0].childNodes[0].childNodes);
console.log("🚩");
console.table(treeNodes[0].childNodes[0].childNodes[0].childNodes);

Answer 3

Answer №2

To begin, it's best to start at the bottom of the tree and work your way up to the top. Various algorithms can help in extracting all the leaf nodes from a tree structure

Add the current element as a child to its parent node.

Once you've finished with the leaves, move up one level and repeat the process until you reach the root.

Answer 4

To begin, it's best to start at the bottom of the tree and work your way up to the top. Various algorithms can help in extracting all the leaf nodes from a tree structure

Add the current element as a child to its parent node.

Once you've finished with the leaves, move up one level and repeat the process until you reach the root.

Answer 5

Answer №3

const elementsArray = [
  { id: 1, name: "Hydrogen" },
  { id: 2, name: "Helium" },
  { id: 3, name: "Lithium" },
  { id: 4, name: "Beryllium" },
  { id: 5, name: "Boron" },
  { id: 6, name: "Carbon" },
  { id: 7, name: "Nitrogen" },
  { id: 8, name: "Oxygen" },
  { id: 9, name: "Fluorine" },
  { id: 10, name: "Neon" },
  ...
];
const nodeList = [];
const createNodeElement = (element) => {
  const nodeElement = {
    id: element.id,
    name: element.name,
    children: [],
    parent: element.parent
  };
  return nodeElement;
};
const fillElementsArray = (elementsArray, rootNode) => {
  elementsArray.forEach((element) => {
    if (element.parent === rootNode.id) {
      const childNode = rootNode.children.find((child) => child.id === element.id);
      if (!childNode) {
        rootNode.children.push(createNodeElement(element));
      }
    }
  });
};
const fillTreeStructure = (elementsArray, rootNode) => {
  fillElementsArray(elementsArray, rootNode);
  if (rootNode.children.length > 0) {
    rootNode.children.forEach((node) => {
      fillElementsArray(elementsArray, node);
      fillTreeStructure(elementsArray, node);
    });
  }
};
elementsArray.forEach((element) => {
  if (!element.parent) {
    const rootElement = createNodeElement(element);
    fillTreeStructure(elementsArray, rootElement);
    nodeList.push(rootElement);
  }
});
console.table(nodeList);
console.log("🚩");
console.table(nodeList[0].children);
console.log("🚩");
console.table(nodeList[0].children[0].children);
console.log("🚩");
console.table(nodeList[0].children[0].children[0].children);

Answer 6

const elementsArray = [
  { id: 1, name: "Hydrogen" },
  { id: 2, name: "Helium" },
  { id: 3, name: "Lithium" },
  { id: 4, name: "Beryllium" },
  { id: 5, name: "Boron" },
  { id: 6, name: "Carbon" },
  { id: 7, name: "Nitrogen" },
  { id: 8, name: "Oxygen" },
  { id: 9, name: "Fluorine" },
  { id: 10, name: "Neon" },
  ...
];
const nodeList = [];
const createNodeElement = (element) => {
  const nodeElement = {
    id: element.id,
    name: element.name,
    children: [],
    parent: element.parent
  };
  return nodeElement;
};
const fillElementsArray = (elementsArray, rootNode) => {
  elementsArray.forEach((element) => {
    if (element.parent === rootNode.id) {
      const childNode = rootNode.children.find((child) => child.id === element.id);
      if (!childNode) {
        rootNode.children.push(createNodeElement(element));
      }
    }
  });
};
const fillTreeStructure = (elementsArray, rootNode) => {
  fillElementsArray(elementsArray, rootNode);
  if (rootNode.children.length > 0) {
    rootNode.children.forEach((node) => {
      fillElementsArray(elementsArray, node);
      fillTreeStructure(elementsArray, node);
    });
  }
};
elementsArray.forEach((element) => {
  if (!element.parent) {
    const rootElement = createNodeElement(element);
    fillTreeStructure(elementsArray, rootElement);
    nodeList.push(rootElement);
  }
});
console.table(nodeList);
console.log("🚩");
console.table(nodeList[0].children);
console.log("🚩");
console.table(nodeList[0].children[0].children);
console.log("🚩");
console.table(nodeList[0].children[0].children[0].children);

Steps to generate an unlimited tree structure using a specified set of data organized by parent ID

Answer №1

Answer №2

Answer №3

Similar questions

Tips for creating a custom Angular Material modal window that is fully responsive to its parent modal window

Complete my search input by utilizing ajax

Textarea is limited to resizing just one specific area

Is it considered poor practice in TypeScript to manually set the type when the type inference is already accurate?

Updating a React JS State using a Parameter

Center align your animations without using the text-align property

Trouble setting custom attribute tags in Ionic 4

A comparison between the if statement and switch statement in JavaScript

Obtain a URL using JavaScript's regular expressions

Once I introduce ngModel into mat-checkbox, the functionality of 'checked' stops working

Error: React-Redux unable to locate Redux context value while utilizing useSelector function

Properly citing JQuery references

What methods can be used to block the input of non-numeric characters in a text field?

Automatically relaunch NodeJS application upon app failure

What are the steps to generating and sharing 'npm create' scripts?

Mobile site experiencing slow scrolling speed

Simplified JavaScript code for generating concealed input forms

What is the process for converting an <input type="file> into a base64 string?

Exploring the process of sending post data and navigating to a URL using AngularJS

Service B is receiving query parameters from Service A in a peculiar object format, leaving us puzzled as to the reason behind this unexpected structure