Converting an array JSON into a hierarchical tree structure of objects in Angular

Question

Converting an array JSON into a hierarchical tree structure of objects in Angular

Looking to transform a JSON into a tree structure of objects. Consider the following example:

    {
    "id": 2,
    "label": "BEAUTY",
    "description": "",
    "parent_id": 0,
  },
  {
    "id": 5,
    "label": "SunGlass",
    "description": "",
    "parent_id": 2,
  },
     {
    "id": 6,
    "label": "Shirts",
    "description": "",
    "parent_id": 2,
  },
  {
    "id": 41,
    "label": "black Glasses",
    "description": "electronique",
    "parent_id": 5,
  },
    {
    "id": 34,
    "label": "T-shirts",
    "description": "electronique",
    "parent_id": 6,
  },
    {
    "id": 3,
    "label": "Phones",
    "description": "",
    "parent_id": 0,
    "embedded_parent": null,
  }

The goal is to convert this list into a tree object based on the 'label' attribute. The expected result looks like this:

const TREE_DATA = {
  BEAUTY: {
    'SunGlass': {'black Glasses':null},
    'Shhirts': null,
    
  },
  Phones: {
      'Sbardilate': null,
      'T-shirrrrsees': null,
      'Balons': null,
  },
  
};

A recursive function is needed to achieve this result, in order to pass it to my Angular component widget efficiently. Thank you for your help!

json angular typescript

Answer 1

Answer №1

As mentioned by @jonrsharpe, it's important to share your solution and explain where you're facing challenges instead of just copying answers from StackOverflow.

To tackle your specific issue, consider creating interfaces to streamline development. For the Node, a recursive interface can be defined like this:

interface Item {
  id: number,
  label: string,
  parent_id: number,
  description: string
}

interface Node {
  [label: string]: Node | null;
}

Another step is to group elements based on the parent_id. This allows quick access to all information within a Node using groupedByParentId[id] with an O(1) access time.

const groupedByParentId = array.reduce(
  (acc, cur) => {
    const parentId = cur.parentId;
    const groupedItems = acc[parentId] == [];
    return {...acc, [parentId]: [...groupedItems, cur]}
  },
  {} as {[id: string]: Item[]}
);

Creating a function to establish a starting point for the tree root is also beneficial:

const rootNodeId = 0;
function makeTree(): Node {
  const node = makeNode(rootNodeId);
  return node;
}

The next step involves implementing the makeNode function. Since you're venturing into this challenge independently, here are some hints to guide you through:

The function signature should be makeNode(id: number) and it should return a Node
Retrieve children of the current node using the provided data structure
If there are no children, you have your answer already ;)
If there are children, create a node for each one and store it in a property specified by the label
Lastly, return the node

Best of luck! :)

Answer 2

As mentioned by @jonrsharpe, it's important to share your solution and explain where you're facing challenges instead of just copying answers from StackOverflow.

To tackle your specific issue, consider creating interfaces to streamline development. For the Node, a recursive interface can be defined like this:

interface Item {
  id: number,
  label: string,
  parent_id: number,
  description: string
}

interface Node {
  [label: string]: Node | null;
}

Another step is to group elements based on the parent_id. This allows quick access to all information within a Node using groupedByParentId[id] with an O(1) access time.

const groupedByParentId = array.reduce(
  (acc, cur) => {
    const parentId = cur.parentId;
    const groupedItems = acc[parentId] == [];
    return {...acc, [parentId]: [...groupedItems, cur]}
  },
  {} as {[id: string]: Item[]}
);

Creating a function to establish a starting point for the tree root is also beneficial:

const rootNodeId = 0;
function makeTree(): Node {
  const node = makeNode(rootNodeId);
  return node;
}

The next step involves implementing the makeNode function. Since you're venturing into this challenge independently, here are some hints to guide you through:

The function signature should be makeNode(id: number) and it should return a Node
Retrieve children of the current node using the provided data structure
If there are no children, you have your answer already ;)
If there are children, create a node for each one and store it in a property specified by the label
Lastly, return the node

Best of luck! :)

Converting an array JSON into a hierarchical tree structure of objects in Angular

Answer №1

Similar questions

The Next Js version "next" is at "14.2.3", indicating that the page is experiencing issues

Oops! Looks like there's a problem with the syntax - the import statement can't be

Utilizing flot.js to showcase a funnel chart with an external JSON file as the data source

Tips for implementing react-select types in custom component development

Detecting clicks outside of a component and updating its state using Typescript in SolidJS

Streamline JSON arrays into separate variables based on their respective categories

Creating an efficient post request using retrofit

What could be causing the JSON data to not be successfully transformed into an array in this particular scenario?

Initiating the ngOnInit lifecycle hook in child components within Angular

"Encountering difficulties while setting up an Angular project

Can you explain the significance of <this> within TypeScript generics?

Data sent from Angular does not reach the C# controller it is intended for

Typescript: Streamline the process of assigning types to enum-like objects

The 'Content-Type' header cannot be defined for HTTP GET requests

Transforming an array of HashMaps into a JSON object within a servlet and showcasing it on a JSP page

Troubleshooting PHP for loop issues when working with arrays

Utilizing Angular to Wrap User Interface Components with HTML Tags

Submitting an event on an Angular modal component

I am attempting to transform this document into a JSON format and save its results in a separate file

Executing POST calls to a Google Apps Script