angular - How to create a mat-tree from firebase data in angular

Question

I have data that comes from firebase (firecloud) with this structure:

{ name: name of node parent: parent_node }

i whish to build a tree in angular, however i cant manage how to input this into the structure that angular component tree uses.

¿Is there a way to inject this data directly into the mat-tree?

标签： angularangular-material

Answer 1

Refer the angular material documentation for mat-tree https://material.angular.io/components/tree/overview . To convert the incoming data to a structure most apt for looping through mat-tree nodes as mentioned in the docs:

if you have an array structure like

const incomingData = [
{ name: name of node parent: parent_node },
{ name: name of node parent: parent_node }
]

let treeData = []
let parentNodes = incomingData.map(el=>el.parent);


 parentNodes.forEach(parent=>{
        let children = incomingData.filter(el=>el.parent==parent).map(el=>el.name)
        parent["children"] = [] ;   
        children.forEach(child=>{
         parent.children.push({"name":child})  
         })
        treedata.push({"name":parent.name});
   })