Zuordnen eines Objekts zu einem anderen in Typescript

Question

Ich habe ein Rollenobjekt, das ich mit PrimeNG einem TreeNode-Objekt zuordnen wollte, um es in einem Baum anzuzeigen. Die Rolle Objekt ist etwa wie folgt (in der Abbildung als auch gezeigt)

role: [ 
id: .... 
name: .... 
    description: .... 
    roles[]: ..... 
] 

das Baumknoten-Objekt hat die folgende Struktur:

{ 
"data": 
[ 
    { 
     "label": "Documents", 
     "data": "Documents Folder", 
     "expandedIcon": "fa-folder-open", 
     "collapsedIcon": "fa-folder", 
     "children": [{ 
       "label": "Work", 
       "data": "Work Folder", 
       "expandedIcon": "fa-folder-open", 
       "collapsedIcon": "fa-folder", 
       "children": [{"label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document"}] 
      }, 
      { 
       "label": "Home", 
       "data": "Home Folder", 
       "expandedIcon": "fa-folder-open", 
       "collapsedIcon": "fa-folder", 
       "children": [{"label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month"}] 
      }] 
    }, 
    { 
     "label": "Pictures", 
     "data": "Pictures Folder", 
     "expandedIcon": "fa-folder-open", 
     "collapsedIcon": "fa-folder", 
     "children": [ 
      {"label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo"}, 
      {"label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo"}, 
      {"label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo"}] 
    }, 
    { 
     "label": "Movies", 
     "data": "Movies Folder", 
     "expandedIcon": "fa-folder-open", 
     "collapsedIcon": "fa-folder", 
     "children": [{ 
       "label": "Al Pacino", 
       "data": "Pacino Movies", 
       "children": [{"label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie"}, {"label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie"}] 
      }, 
      { 
       "label": "Robert De Niro", 
       "data": "De Niro Movies", 
       "children": [{"label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie"}, {"label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie"}] 
      }] 
    } 
] 

}

data.roles.forEach((role, index) => { 
     //this.roleTree.label = role.Name; 
     //this.roleTree.data = role.ID; 

     let treeNode: TreeNode = { 
      label: role.Name, 
      data: role 

     } 

     this.treeNodes.push(treeNode); 
     console.log(role); 
     console.log(index); 

    }); 

Aber dieser Code scheint zu komplex zu sein, wenn ich t ry 'roles' in 'role', um 'children' in treeNode zuzuordnen. Ich habe einige Beispiele gesehen wie this, aber es ist die Zuordnung der gleichen Feldnamen.

Ich bin neu in Typesript, gibt es eine Problemumgehung, um mein Rollenobjekt mit Rollen zu TreeNode mit Kindern zu konvertieren, indem ich meinen Feldname (z. B. Name) auf "Label" der Rolle zuordnen?

Ein Codebeispiel würde sehr geschätzt werden.

Answer 1

Nun, ich bin nicht 100% sicher über die Role und TreeNode Typen, die Sie verwenden. Hier ist meine Schätzung basierend auf dem Code in Ihrer Frage.

Role einige Eigenschaften hat mich um dich kümmern, aber die knifflig ist die roles Eigenschaft, die ich vermute, mich sollte eine Reihe von Role Objekten sein:

interface Role { 
    id: string; 
    name: string; 
    description: string; 
    roles: Role[]; 
} 

Ebenso TreeNode einige Eigenschaften hat, aber die knifflige ist die children Eigenschaft, die ein Array von TreeNode Objekten ist. Auch ich gehe davon aus, dass TreeNode ist generisch in der Art der data, und in diesem Fall, dass Sie TreeNode<Role> tun, das heißt die data Eigenschaft wird ein Role Objekt:

interface TreeNode<T> { 
    label: string; 
    data: T; 
    expandedIcon?: string; 
    collapsedIcon?: string; 
    children: TreeNode<T>[]; 
} 

Wenn diejenigen sind richtig, dann können Sie die folgende roleToTreeNode() Funktion verwenden, um ein Role Objekt zu einem TreeNode<Role> Objekt abbilden:

function roleToTreeNode(role: Role): TreeNode<Role> { 
    return { 
    label: role.name, 
    data: role, 
    children: role.roles.map(roleToTreeNode) 
    }; 
} 

die children: Linie ist die operative par t der Funktion: Sie nehmen die role.roles Array und Zuordnung jedes Role Element zu einem TreeNode<Role>, was die roleToTreeNode() Funktion ist. Das heißt, roleToTreeNode() ist eine rekursive Funktion, die sich selbst aufruft.

Macht das Sinn? Ich hoffe, das hilft. Viel Glück!