从对象在Javascript数组重新创建一个对象 [英] Recreate an object from an array of objects in Javascript
本文介绍了从对象在Javascript数组重新创建一个对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我可以用下面的一些帮助：
我试图创建一个使用阵营树形菜单可过滤词preSS导航菜单。
树型菜单组件需要以下数据结构：
{
家 ： {
复选框：假的，
ID：1，
儿童：{
入门 ： {
复选框：假的，
编号：47，
弹头：越来越开工，
}，
交互设计原则：{
复选框：假的，
儿童：{
设计原则的第一：{
选择：假的，
复选框：假的，
编号：67
}
}
}
}
}，
UPS手机（IOS，安卓）：{
复选框：假的，
儿童：{
概览：{
复选框：假的，
编号：22
}，
参考 ： {
复选框：假的，
编号：14
}
}
}，
MDOT：{
复选框：假的，
儿童：{
元素：{
复选框：假的，
标识：19，
儿童：{
导航 ： {
复选框：假的，
编号：90
}
}
}，
}
}
}
我已经设置了上面的字preSS的父母和子女的网页并且还创造了一个层次字preSS菜单。我现在用的是字preSS菜单API
返回下列数据结构：
[
{
ID：46，
序：1，
父：0，
头衔：家，
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：2，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：
{
ID：47，
序：2，
父：46，
头衔：入门，
URL：http://mobilestyle.ups.dev/home/getting-started/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：15，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：[]
}，
{
ID：48，
序：3，
父：46，
头衔：交互设计原则，
URL：http://mobilestyle.ups.dev/home/interaction-design-principles/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
OBJECT_ID：22，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：
{
ID：49，
序：4，
父：48，
头衔：设计原则的第一
URL：http://mobilestyle.ups.dev/home/interaction-design-principles/design-principle-the-first/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
OBJECT_ID：24，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：[]
}
]
}
]
}，
{
ID：50，
序：5，
父：0，
头衔：MDOT
URL：http://mobilestyle.ups.dev/mdot/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：8，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：
{
ID：51，
序：6，
父：50，
头衔：元素，
URL：http://mobilestyle.ups.dev/mdot/elements/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
OBJECT_ID：30，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：
{
ID：52，
序：7，
父：51，
头衔：导航，
URL：http://mobilestyle.ups.dev/mdot/elements/navigation/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：32，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：[]
}
]
}
]
}，
{
ID：54，
序：8，
父：0，
头衔：UPS手机（IOS，Android的），
URL：http://mobilestyle.ups.dev/ups-mobile/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：13，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：
{
ID：55，
序：9，
父：54，
头衔：概述，
URL：http://mobilestyle.ups.dev/ups-mobile/overview/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
OBJECT_ID：26，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：[]
}，
{
ID：56，
命令：10，
父：54，
头衔：参考，
URL：http://mobilestyle.ups.dev/ups-mobile/reference/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：28，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：[]
}
]
}
]
有人可以帮我把我从这个词preSS菜单API接收到的树形菜单组件需要什么？
在此先感谢您的帮助。 家
解决方案
我会用递归函数来打造你想要的对象。类似如下：
函数buildMenu（源，结果）{
//建立一个返回值，如果在不通过
结果=结果|| {};
如果（源和放大器;＆安培; source.length）{
VAR项目= source.shift（）; //需要从数组的第一个项目
导致[item.title] = {ID：item.ID}; //创建一个新属性的结果
//如果有孩子，递归地建立他们
如果（item.children＆安培;＆安培; item.children.length）{
结果[item.title]。孩子= buildMenu（item.children）;
}
//建立附加项递归，基于所述阵列中的其余项目
返回buildMenu（源，结果）;
} 其他 {
//都不剩了，做
返回结果;
}
}
呼叫源阵列上的功能，它应该工作。有一个运行的例子，如果你想尝试一下以下。
函数buildMenu（源，结果）{
结果=结果|| {};
如果（源和放大器;＆安培; source.length）{
VAR项目= source.shift（）;
导致[item.title] = {ID：item.ID};
如果（item.children＆安培;＆安培; item.children.length）{
结果[item.title]。孩子= buildMenu（item.children）;
}
返回buildMenu（源，结果）;
} 其他 {
返回结果;
}
}
无功源= [
{
ID：46，
序：1，
父：0，
头衔：家，
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：2，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：
{
ID：47，
序：2，
父：46，
头衔：入门，
URL：http://mobilestyle.ups.dev/home/getting-started/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：15，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：[]
}，
{
ID：48，
序：3，
父：46，
头衔：交互设计原则，
URL：http://mobilestyle.ups.dev/home/interaction-design-principles/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
OBJECT_ID：22，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：
{
ID：49，
序：4，
父：48，
头衔：设计原则的第一
URL：http://mobilestyle.ups.dev/home/interaction-design-principles/design-principle-the-first/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
OBJECT_ID：24，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：[]
}
]
}
]
}，
{
ID：50，
序：5，
父：0，
头衔：MDOT
URL：http://mobilestyle.ups.dev/mdot/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：8，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：
{
ID：51，
序：6，
父：50，
头衔：元素，
URL：http://mobilestyle.ups.dev/mdot/elements/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
OBJECT_ID：30，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：
{
ID：52，
序：7，
父：51，
头衔：导航，
URL：http://mobilestyle.ups.dev/mdot/elements/navigation/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：32，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：[]
}
]
}
]
}，
{
ID：54，
序：8，
父：0，
头衔：UPS手机（IOS，Android的），
URL：http://mobilestyle.ups.dev/ups-mobile/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：13，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：
{
ID：55，
序：9，
父：54，
头衔：概述，
URL：http://mobilestyle.ups.dev/ups-mobile/overview/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
OBJECT_ID：26，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：[]
}，
{
ID：56，
命令：10，
父：54，
头衔：参考，
URL：http://mobilestyle.ups.dev/ups-mobile/reference/
ATTR：，
目标： ，
类：，
新华财经：，
描述： ，
的object_id：28，
对象：页，
类型：post_type，
TYPE_LABEL：页面，
孩子：[]
}
]
}
]。
VAR DEST = buildMenu（源）;
执行console.log（DEST）;
＆LT;脚本src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
I could use some help with the following:
I'm trying to create a filterable wordpress nav menu using React Tree Menu.
The Tree Menu component requires the following data structure:
{
"Home" : {
checkbox: false,
ID: 1,
children: {
"Getting Started" : {
checkbox: false,
ID: 47,
slug: 'getting-started',
},
"Interaction Design Principles": {
checkbox: false,
children: {
"Design Principle the First" : {
selected: false,
checkbox: false,
ID: 67
}
}
}
}
},
"UPS Mobile (iOs, Android)" : {
checkbox: false,
children: {
"Overview" : {
checkbox: false,
ID: 22
},
"Reference" : {
checkbox: false,
ID: 14
}
}
},
"mDot" : {
checkbox: false,
children: {
"Elements" : {
checkbox: false,
ID: 19,
children: {
"Navigation" : {
checkbox: false,
ID: 90
}
}
},
}
}
}
I have set up parent and child pages of the above in wordpress and have also created a hierarchical wordpress menu. I am using the wordpress menu api
which returns the following data structure:
[
{
"ID": 46,
"order": 1,
"parent": 0,
"title": "Home",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 2,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": [
{
"ID": 47,
"order": 2,
"parent": 46,
"title": "Getting Started",
"url": "http://mobilestyle.ups.dev/home/getting-started/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 15,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": []
},
{
"ID": 48,
"order": 3,
"parent": 46,
"title": "Interaction Design Principles",
"url": "http://mobilestyle.ups.dev/home/interaction-design-principles/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 22,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": [
{
"ID": 49,
"order": 4,
"parent": 48,
"title": "Design Principle the First",
"url": "http://mobilestyle.ups.dev/home/interaction-design-principles/design-principle-the-first/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 24,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": []
}
]
}
]
},
{
"ID": 50,
"order": 5,
"parent": 0,
"title": "mDot",
"url": "http://mobilestyle.ups.dev/mdot/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 8,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": [
{
"ID": 51,
"order": 6,
"parent": 50,
"title": "Elements",
"url": "http://mobilestyle.ups.dev/mdot/elements/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 30,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": [
{
"ID": 52,
"order": 7,
"parent": 51,
"title": "Navigation",
"url": "http://mobilestyle.ups.dev/mdot/elements/navigation/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 32,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": []
}
]
}
]
},
{
"ID": 54,
"order": 8,
"parent": 0,
"title": "UPS Mobile (iOS, Android)",
"url": "http://mobilestyle.ups.dev/ups-mobile/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 13,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": [
{
"ID": 55,
"order": 9,
"parent": 54,
"title": "Overview",
"url": "http://mobilestyle.ups.dev/ups-mobile/overview/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 26,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": []
},
{
"ID": 56,
"order": 10,
"parent": 54,
"title": "Reference",
"url": "http://mobilestyle.ups.dev/ups-mobile/reference/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 28,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": []
}
]
}
]
Can someone please help me turn what I receive from the wordpress menu api into what the Tree Menu component expects?
Thanks in advance for any help. -Ian
解决方案
I'd use a recursive function to build the object you want. Something like the following:
function buildMenu(source, result) {
//build a return value if one wasn't passed in
result = result || {};
if (source && source.length) {
var item = source.shift(); //take first item from the array
result[item.title] = { ID : item.ID }; //make a new property in the result
//if there are children, build them recursively
if (item.children && item.children.length) {
result[item.title].children = buildMenu(item.children);
}
//build additional items recursively, based on the remaining items in the array
return buildMenu(source, result);
} else {
//none left, done
return result;
}
}
Call that function on your source array and it should work. There's a running example below if you want to try it out.
function buildMenu(source, result) {
result = result || {};
if (source && source.length) {
var item = source.shift();
result[item.title] = { ID : item.ID };
if (item.children && item.children.length) {
result[item.title].children = buildMenu(item.children);
}
return buildMenu(source, result);
} else {
return result;
}
}
var source = [
{
"ID": 46,
"order": 1,
"parent": 0,
"title": "Home",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 2,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": [
{
"ID": 47,
"order": 2,
"parent": 46,
"title": "Getting Started",
"url": "http://mobilestyle.ups.dev/home/getting-started/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 15,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": []
},
{
"ID": 48,
"order": 3,
"parent": 46,
"title": "Interaction Design Principles",
"url": "http://mobilestyle.ups.dev/home/interaction-design-principles/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 22,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": [
{
"ID": 49,
"order": 4,
"parent": 48,
"title": "Design Principle the First",
"url": "http://mobilestyle.ups.dev/home/interaction-design-principles/design-principle-the-first/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 24,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": []
}
]
}
]
},
{
"ID": 50,
"order": 5,
"parent": 0,
"title": "mDot",
"url": "http://mobilestyle.ups.dev/mdot/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 8,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": [
{
"ID": 51,
"order": 6,
"parent": 50,
"title": "Elements",
"url": "http://mobilestyle.ups.dev/mdot/elements/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 30,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": [
{
"ID": 52,
"order": 7,
"parent": 51,
"title": "Navigation",
"url": "http://mobilestyle.ups.dev/mdot/elements/navigation/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 32,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": []
}
]
}
]
},
{
"ID": 54,
"order": 8,
"parent": 0,
"title": "UPS Mobile (iOS, Android)",
"url": "http://mobilestyle.ups.dev/ups-mobile/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 13,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": [
{
"ID": 55,
"order": 9,
"parent": 54,
"title": "Overview",
"url": "http://mobilestyle.ups.dev/ups-mobile/overview/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 26,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": []
},
{
"ID": 56,
"order": 10,
"parent": 54,
"title": "Reference",
"url": "http://mobilestyle.ups.dev/ups-mobile/reference/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 28,
"object": "page",
"type": "post_type",
"type_label": "Page",
"children": []
}
]
}
];
var dest = buildMenu(source);
console.log(dest);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
这篇关于从对象在Javascript数组重新创建一个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
