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:
JavaScript
x
52
52
1
{
2
"Home" : {
3
checkbox: false,
4
ID: 1,
5
children: {
6
"Getting Started" : {
7
checkbox: false,
8
ID: 47,
9
slug: 'getting-started',
10
},
11
"Interaction Design Principles": {
12
checkbox: false,
13
children: {
14
"Design Principle the First" : {
15
selected: false,
16
checkbox: false,
17
ID: 67
18
}
19
}
20
}
21
}
22
},
23
"UPS Mobile (iOs, Android)" : {
24
checkbox: false,
25
children: {
26
"Overview" : {
27
checkbox: false,
28
ID: 22
29
},
30
"Reference" : {
31
checkbox: false,
32
ID: 14
33
}
34
}
35
},
36
"mDot" : {
37
checkbox: false,
38
children: {
39
"Elements" : {
40
checkbox: false,
41
ID: 19,
42
children: {
43
"Navigation" : {
44
checkbox: false,
45
ID: 90
46
}
47
}
48
},
49
}
50
}
51
}
52
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:
JavaScript
1
177
177
1
[
2
{
3
"ID": 46,
4
"order": 1,
5
"parent": 0,
6
"title": "Home",
7
"attr": "",
8
"target": "",
9
"classes": "",
10
"xfn": "",
11
"description": "",
12
"object_id": 2,
13
"object": "page",
14
"type": "post_type",
15
"type_label": "Page",
16
"children": [
17
{
18
"ID": 47,
19
"order": 2,
20
"parent": 46,
21
"title": "Getting Started",
22
"url": "http://mobilestyle.ups.dev/home/getting-started/",
23
"attr": "",
24
"target": "",
25
"classes": "",
26
"xfn": "",
27
"description": "",
28
"object_id": 15,
29
"object": "page",
30
"type": "post_type",
31
"type_label": "Page",
32
"children": []
33
},
34
{
35
"ID": 48,
36
"order": 3,
37
"parent": 46,
38
"title": "Interaction Design Principles",
39
"url": "http://mobilestyle.ups.dev/home/interaction-design-principles/",
40
"attr": "",
41
"target": "",
42
"classes": "",
43
"xfn": "",
44
"description": "",
45
"object_id": 22,
46
"object": "page",
47
"type": "post_type",
48
"type_label": "Page",
49
"children": [
50
{
51
"ID": 49,
52
"order": 4,
53
"parent": 48,
54
"title": "Design Principle the First",
55
"url": "http://mobilestyle.ups.dev/home/interaction-design-principles/design-principle-the-first/",
56
"attr": "",
57
"target": "",
58
"classes": "",
59
"xfn": "",
60
"description": "",
61
"object_id": 24,
62
"object": "page",
63
"type": "post_type",
64
"type_label": "Page",
65
"children": []
66
}
67
]
68
}
69
]
70
},
71
{
72
"ID": 50,
73
"order": 5,
74
"parent": 0,
75
"title": "mDot",
76
"url": "http://mobilestyle.ups.dev/mdot/",
77
"attr": "",
78
"target": "",
79
"classes": "",
80
"xfn": "",
81
"description": "",
82
"object_id": 8,
83
"object": "page",
84
"type": "post_type",
85
"type_label": "Page",
86
"children": [
87
{
88
"ID": 51,
89
"order": 6,
90
"parent": 50,
91
"title": "Elements",
92
"url": "http://mobilestyle.ups.dev/mdot/elements/",
93
"attr": "",
94
"target": "",
95
"classes": "",
96
"xfn": "",
97
"description": "",
98
"object_id": 30,
99
"object": "page",
100
"type": "post_type",
101
"type_label": "Page",
102
"children": [
103
{
104
"ID": 52,
105
"order": 7,
106
"parent": 51,
107
"title": "Navigation",
108
"url": "http://mobilestyle.ups.dev/mdot/elements/navigation/",
109
"attr": "",
110
"target": "",
111
"classes": "",
112
"xfn": "",
113
"description": "",
114
"object_id": 32,
115
"object": "page",
116
"type": "post_type",
117
"type_label": "Page",
118
"children": []
119
}
120
]
121
}
122
]
123
},
124
{
125
"ID": 54,
126
"order": 8,
127
"parent": 0,
128
"title": "UPS Mobile (iOS, Android)",
129
"url": "http://mobilestyle.ups.dev/ups-mobile/",
130
"attr": "",
131
"target": "",
132
"classes": "",
133
"xfn": "",
134
"description": "",
135
"object_id": 13,
136
"object": "page",
137
"type": "post_type",
138
"type_label": "Page",
139
"children": [
140
{
141
"ID": 55,
142
"order": 9,
143
"parent": 54,
144
"title": "Overview",
145
"url": "http://mobilestyle.ups.dev/ups-mobile/overview/",
146
"attr": "",
147
"target": "",
148
"classes": "",
149
"xfn": "",
150
"description": "",
151
"object_id": 26,
152
"object": "page",
153
"type": "post_type",
154
"type_label": "Page",
155
"children": []
156
},
157
{
158
"ID": 56,
159
"order": 10,
160
"parent": 54,
161
"title": "Reference",
162
"url": "http://mobilestyle.ups.dev/ups-mobile/reference/",
163
"attr": "",
164
"target": "",
165
"classes": "",
166
"xfn": "",
167
"description": "",
168
"object_id": 28,
169
"object": "page",
170
"type": "post_type",
171
"type_label": "Page",
172
"children": []
173
}
174
]
175
}
176
]
177
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
Advertisement
Answer
I’d use a recursive function to build the object you want. Something like the following:
JavaScript
1
23
23
1
function buildMenu(source, result) {
2
//build a return value if one wasn't passed in
3
result = result || {};
4
5
if (source && source.length) {
6
7
var item = source.shift(); //take first item from the array
8
result[item.title] = { ID : item.ID }; //make a new property in the result
9
10
//if there are children, build them recursively
11
if (item.children && item.children.length) {
12
result[item.title].children = buildMenu(item.children);
13
}
14
15
//build additional items recursively, based on the remaining items in the array
16
return buildMenu(source, result);
17
18
} else {
19
//none left, done
20
return result;
21
}
22
}
23
Call that function on your source array and it should work. There’s a running example below if you want to try it out.
JavaScript
1
198
198
1
function buildMenu(source, result) {
2
result = result || {};
3
4
if (source && source.length) {
5
6
var item = source.shift();
7
result[item.title] = { ID : item.ID };
8
9
if (item.children && item.children.length) {
10
result[item.title].children = buildMenu(item.children);
11
}
12
13
return buildMenu(source, result);
14
15
} else {
16
return result;
17
}
18
}
19
20
var source = [
21
{
22
"ID": 46,
23
"order": 1,
24
"parent": 0,
25
"title": "Home",
26
"attr": "",
27
"target": "",
28
"classes": "",
29
"xfn": "",
30
"description": "",
31
"object_id": 2,
32
"object": "page",
33
"type": "post_type",
34
"type_label": "Page",
35
"children": [
36
{
37
"ID": 47,
38
"order": 2,
39
"parent": 46,
40
"title": "Getting Started",
41
"url": "http://mobilestyle.ups.dev/home/getting-started/",
42
"attr": "",
43
"target": "",
44
"classes": "",
45
"xfn": "",
46
"description": "",
47
"object_id": 15,
48
"object": "page",
49
"type": "post_type",
50
"type_label": "Page",
51
"children": []
52
},
53
{
54
"ID": 48,
55
"order": 3,
56
"parent": 46,
57
"title": "Interaction Design Principles",
58
"url": "http://mobilestyle.ups.dev/home/interaction-design-principles/",
59
"attr": "",
60
"target": "",
61
"classes": "",
62
"xfn": "",
63
"description": "",
64
"object_id": 22,
65
"object": "page",
66
"type": "post_type",
67
"type_label": "Page",
68
"children": [
69
{
70
"ID": 49,
71
"order": 4,
72
"parent": 48,
73
"title": "Design Principle the First",
74
"url": "http://mobilestyle.ups.dev/home/interaction-design-principles/design-principle-the-first/",
75
"attr": "",
76
"target": "",
77
"classes": "",
78
"xfn": "",
79
"description": "",
80
"object_id": 24,
81
"object": "page",
82
"type": "post_type",
83
"type_label": "Page",
84
"children": []
85
}
86
]
87
}
88
]
89
},
90
{
91
"ID": 50,
92
"order": 5,
93
"parent": 0,
94
"title": "mDot",
95
"url": "http://mobilestyle.ups.dev/mdot/",
96
"attr": "",
97
"target": "",
98
"classes": "",
99
"xfn": "",
100
"description": "",
101
"object_id": 8,
102
"object": "page",
103
"type": "post_type",
104
"type_label": "Page",
105
"children": [
106
{
107
"ID": 51,
108
"order": 6,
109
"parent": 50,
110
"title": "Elements",
111
"url": "http://mobilestyle.ups.dev/mdot/elements/",
112
"attr": "",
113
"target": "",
114
"classes": "",
115
"xfn": "",
116
"description": "",
117
"object_id": 30,
118
"object": "page",
119
"type": "post_type",
120
"type_label": "Page",
121
"children": [
122
{
123
"ID": 52,
124
"order": 7,
125
"parent": 51,
126
"title": "Navigation",
127
"url": "http://mobilestyle.ups.dev/mdot/elements/navigation/",
128
"attr": "",
129
"target": "",
130
"classes": "",
131
"xfn": "",
132
"description": "",
133
"object_id": 32,
134
"object": "page",
135
"type": "post_type",
136
"type_label": "Page",
137
"children": []
138
}
139
]
140
}
141
]
142
},
143
{
144
"ID": 54,
145
"order": 8,
146
"parent": 0,
147
"title": "UPS Mobile (iOS, Android)",
148
"url": "http://mobilestyle.ups.dev/ups-mobile/",
149
"attr": "",
150
"target": "",
151
"classes": "",
152
"xfn": "",
153
"description": "",
154
"object_id": 13,
155
"object": "page",
156
"type": "post_type",
157
"type_label": "Page",
158
"children": [
159
{
160
"ID": 55,
161
"order": 9,
162
"parent": 54,
163
"title": "Overview",
164
"url": "http://mobilestyle.ups.dev/ups-mobile/overview/",
165
"attr": "",
166
"target": "",
167
"classes": "",
168
"xfn": "",
169
"description": "",
170
"object_id": 26,
171
"object": "page",
172
"type": "post_type",
173
"type_label": "Page",
174
"children": []
175
},
176
{
177
"ID": 56,
178
"order": 10,
179
"parent": 54,
180
"title": "Reference",
181
"url": "http://mobilestyle.ups.dev/ups-mobile/reference/",
182
"attr": "",
183
"target": "",
184
"classes": "",
185
"xfn": "",
186
"description": "",
187
"object_id": 28,
188
"object": "page",
189
"type": "post_type",
190
"type_label": "Page",
191
"children": []
192
}
193
]
194
}
195
];
196
197
var dest = buildMenu(source);
198
console.log(dest);