在 Typescript 中将对象映射到另一个对象 [英] Map an object to another in Typescript

问题描述

我有一个角色对象，我想使用 PrimeNG 将其映射到 TreeNode 对象以在树中显示它.角色对象是这样的(如图所示)

I have a role object that I wanted to map to a TreeNode object using PrimeNG to display it in a tree. The role object is something like this (shown in the picture as well)

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

树节点对象的结构如下:

The tree node object has the following structure is:

{
"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 但它映射了相同的字段名称.

But this code seems to be too complex when I try 'roles' in 'role' to map to 'children' in treeNode. I have seen some examples like this but it is mapping the same field names.

我是 Typesript 的新手，是否有一种解决方法可以通过指定要映射到角色的标签"的字段名(例如名称)将我的带有角色的角色对象转换为带有孩子的树节点?

I'm new to Typesript, is there a workaround to convert my role object with roles to treeNode with children by specifying my fieldname (e.g. name) to be mapped to 'label' of role?

非常感谢代码示例.

推荐答案

好吧，我不是 100% 确定您正在使用的 Role 和 TreeNode 类型.这是我根据您问题中的代码做出的猜测.

Well, I'm not 100% sure about the Role and TreeNode types you're using. Here's my guess based on the code in your question.

Role 有一些你关心的属性，但棘手的是 roles 属性，我猜它是一个 Role 的数组 对象:

Role has a few properties you care about, but the tricky one is the roles property, which I am guessing is meant to be an array of Role objects:

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

同样，TreeNode 有一些属性，但棘手的是 children 属性，它是一个 TreeNode 对象数组.另外，我假设 TreeNode 在 data 类型中是通用的，在这种情况下，你想要做 TreeNode，意味着 data 属性将是一个 Role 对象:

Likewise, TreeNode has some properties, but the tricky one is the children property which is an array of TreeNode objects. Also, I'm assuming that TreeNode is generic in the type of data, and in this case you want to do TreeNode<Role>, meaning the data property will be a Role object:

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

如果这些是正确的，那么你可以使用下面的roleToTreeNode()函数将一个Role对象映射到一个TreeNode<角色>对象:

If those are correct, then you can use the following roleToTreeNode() function to map a Role object to a TreeNode<Role> object:

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

children: 行是该函数的操作部分:您使用 role.roles 数组，并映射每个 Role 元素到 TreeNode，这就是 roleToTreeNode() 函数所做的.也就是说，roleToTreeNode() 是一个调用自身的递归函数.

The children: line is the operative part of the function: you are taking the role.roles array, and mapping each Role element to a TreeNode<Role>, which is what the roleToTreeNode() function does. That is, roleToTreeNode() is a recursive function which calls itself.

这有意义吗?希望有帮助.祝你好运！

Does this make sense? Hope that helps. Good luck!

这篇关于在 Typescript 中将对象映射到另一个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！