Typescriptで別のオブジェクトにマップする

Question

PrimeNGを使用してTreeNodeオブジェクトにマップするロールオブジェクトをツリーに表示しました。 ロールオブジェクトは、ツリーノードオブジェクトは、以下の構造を有するようなもの（同様に画像に示すように）

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

ある：

{ 
"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); 

    }); 

しかし、このコードは複雑すぎるようです'role'の 'roles'をtreeNodeの 'children'にマップします。私はthisのようないくつかの例を見てきましたが、同じフィールド名をマッピングしています。

私は文字を新しくしました。私のフィールド名（例：名前）をロールの 'ラベル'にマッピングするように指定することで、ロール付きのロールオブジェクトを子と一緒にtreeNodeに変換できますか？

コード例は高く評価されます。

Answer 1

まあ、あなたが使用しているRoleとTreeNodeタイプについては100％確信していません。あなたの質問のコードに基づいた私の推測です。

Roleは、あなたが気にいくつかのプロパティを持っていますが、トリッキーな1、私はRoleオブジェクトの配列であることを意味している推測していrolesプロパティ、次のとおりです。同様に

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

、TreeNodeはいくつかのプロパティを持って、複雑なものは、TreeNodeオブジェクトの配列であるchildrenプロパティです。また、Role対象となりますdataプロパティを意味する、私はTreeNodeがdataのタイプでジェネリックであることを仮定しているが、この場合には、あなたがTreeNode<Role>をしたい：それらが正しい場合

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

、 children:ラインが動作パーで

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

：あなたはTreeNode<Role>オブジェクトにRoleオブジェクトをマッピングするために、次のroleToTreeNode()機能を使用することができますあなたはrole.roles配列をとり、それぞれのRole要素をTreeNode<Role>にマッピングします。これはroleToTreeNode()関数の機能です。つまり、roleToTreeNode()は、自身を呼び出す再帰関数です。

これは意味がありますか？希望が役立ちます。がんばろう！