在Typescript中将一个对象映射到另一个对象

Question

在Typescript中将一个对象映射到另一个对象

8

我有一个角色对象，我想使用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'时，这段代码似乎过于复杂了。我看到一些类似这个的示例，但是它将相同的字段名进行映射。

我对Typesript还很陌生，是否有一种方法可以通过指定我的字段名称（例如name）映射到'role'的'label'来将我的'role'对象转换为'treeNode'对象？

非常感谢提供代码示例。

- sam

你是否有你的角色类型或者TreeNode类型的接口？ TreeNode是否允许任意对象作为其data属性，并且它的children是一个TreeNode数组？ - jcalz

roles 属性的元素类型是什么？它们与 role 对象的类型相同吗？ - jcalz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jcalz · Accepted Answer

嗯，我对你使用的Role和TreeNode类型并不完全确定。根据你问题中的代码，这是我的猜测。

Role有一些你关心的属性，但其中棘手的是roles属性，我猜想它应该是一个Role对象数组：

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

同样地，TreeNode 有一些属性，但其中比较棘手的是 children 属性，它是一个 TreeNode 对象数组。此外，我假设 TreeNode 在 data 的类型上是泛型的，在这种情况下，您需要使用 TreeNode<Role>，意味着 data 属性将是一个 Role 对象：

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

如果这些是正确的，那么您可以使用以下roleToTreeNode()函数将Role对象映射到TreeNode<Role>对象：

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

children:这行是函数的实际操作部分：您正在获取role.roles数组，并将每个Role元素映射到一个TreeNode<Role>，这就是roleToTreeNode()函数所做的。也就是说，roleToTreeNode()是一个调用自身的递归函数。

您明白了吗？希望有所帮助。祝好运！