在 Typescript 中将一个对象映射到另一个对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45991866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Map an object to another in Typescript
提问by sam
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)
我有一个角色对象，我想使用 PrimeNG 将其映射到 TreeNode 对象以在树中显示它。角色对象是这样的（如图所示）
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);
});
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 thisbut it is mapping the same field names.
但是当我尝试将“role”中的“roles”映射到treeNode中的“children”时，这段代码似乎太复杂了。我曾见过这样一些例子这却是映射相同的字段名。
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?
我是 Typesript 的新手，是否有一种解决方法可以通过指定我的字段名（例如名称）映射到角色的“标签”来将我的带有角色的角色对象转换为带有孩子的树节点？
A code example would be highly appreciated.
一个代码示例将不胜感激。
回答by jcalz
Well, I'm not 100% sure about the Roleand TreeNodetypes you're using. Here's my guess based on the code in your question.
好吧，我不是 100% 确定您正在使用的Role和TreeNode类型。这是我根据您问题中的代码进行的猜测。
Rolehas a few properties you care about, but the tricky one is the rolesproperty, which I am guessing is meant to be an array of Roleobjects:
Role有一些您关心的属性，但棘手的是roles属性，我猜它应该是一组Role对象：
interface Role {
id: string;
name: string;
description: string;
roles: Role[];
}
Likewise, TreeNodehas some properties, but the tricky one is the childrenproperty which is an array of TreeNodeobjects. Also, I'm assuming that TreeNodeis generic in the type of data, and in this case you want to do TreeNode<Role>, meaning the dataproperty will be a Roleobject:
同样，TreeNode有一些属性，但棘手的是children属性是一个TreeNode对象数组。另外，我假设它TreeNode在 的类型中是通用的data，在这种情况下你想要做TreeNode<Role>，这意味着该data属性将是一个Role对象：
interface TreeNode<T> {
label: string;
data: T;
expandedIcon?: string;
collapsedIcon?: string;
children: TreeNode<T>[];
}
Ifthose are correct, then you can use the following roleToTreeNode()function to map a Roleobject to a TreeNode<Role>object:
如果这些是正确的，那么您可以使用以下roleToTreeNode()函数将Role对象映射到TreeNode<Role>对象：
function roleToTreeNode(role: Role): TreeNode<Role> {
return {
label: role.name,
data: role,
children: role.roles.map(roleToTreeNode)
};
}
The children:line is the operative part of the function: you are taking the role.rolesarray, and mapping each Roleelement to a TreeNode<Role>, which is what the roleToTreeNode()function does. That is, roleToTreeNode()is a recursive function which calls itself.
该children:行是函数的操作部分：您正在获取role.roles数组，并将每个Role元素映射到 a TreeNode<Role>，这就是roleToTreeNode()函数所做的。也就是说，roleToTreeNode()是一个调用自身的递归函数。
Does this make sense? Hope that helps. Good luck!
这有意义吗？希望有帮助。祝你好运！
