回答編集履歴
1
要件を忠実に再現したコードを追記
answer
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
### DOM API 互換コード
|
|
2
2
|
|
|
3
|
+
設計がDOMと似通っていたので、完全にDOM互換にしてみました。
|
|
4
|
+
|
|
3
5
|
- [virtual-dom.js: DOM API互換の Interface で仮想DOMオブジェクトを生成する](https://gist.github.com/think49/a2a91f34bb947b3b5a841fd8b4d3342a)
|
|
4
6
|
|
|
5
7
|
```HTML
|
|
@@ -78,4 +80,108 @@
|
|
|
78
80
|
</script>
|
|
79
81
|
```
|
|
80
82
|
|
|
83
|
+
### 要件を忠実に再現したコード
|
|
84
|
+
|
|
85
|
+
DOM互換に拘らず、要件を再現したコード。
|
|
86
|
+
ただし、「整形後のコード」では次の部分が異なります。
|
|
87
|
+
|
|
88
|
+
- `SyntaxError` が出ていた部分に `,` を追加した。
|
|
89
|
+
- 質問文には `before[0].children[0].children[0].children` が存在せず、`before[1].children[0].children === []` が存在する為、整合性が取れない。`children` が存在する方に統一した。
|
|
90
|
+
|
|
91
|
+
jsfiddleサンプル。
|
|
92
|
+
|
|
93
|
+
- [親子関係のあるオブジェクトを生成する - JSFiddle](https://jsfiddle.net/nvqojb2L/)
|
|
94
|
+
|
|
95
|
+
```JavaScript
|
|
96
|
+
'use strict';
|
|
97
|
+
(function () {
|
|
98
|
+
function getElementById (elementList, id) {
|
|
99
|
+
// id = String(id);
|
|
100
|
+
|
|
101
|
+
for (var i = 0, len = elementList.length, element; i < len; ++i) {
|
|
102
|
+
element = elementList[i];
|
|
103
|
+
|
|
104
|
+
if (element.id === id) {
|
|
105
|
+
return element;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
return null;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
function appendChild (parentObject, childObject) {
|
|
113
|
+
Array.isArray(parentObject.children) ? parentObject.children.push(childObject) : parentObject.children = [childObject];
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
var before = [
|
|
117
|
+
{
|
|
118
|
+
"id": 1,
|
|
119
|
+
"parent": 0
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"id": 2,
|
|
123
|
+
"parent": 0
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"id": 3,
|
|
127
|
+
"parent": 1
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"id": 4,
|
|
131
|
+
"parent": 2
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"id": 5,
|
|
135
|
+
"parent": 3
|
|
136
|
+
}
|
|
137
|
+
];
|
|
138
|
+
|
|
139
|
+
var rootObject = {"id": 0};
|
|
140
|
+
|
|
141
|
+
before.forEach(function (object, i) {
|
|
142
|
+
if (!Array.isArray(object.children)) {
|
|
143
|
+
object.children = [];
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
appendChild(object.parent !== 0 ? getElementById(before, object.parent) : rootObject, object);
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
// 期待する整形後のコード
|
|
150
|
+
var after = [
|
|
151
|
+
{
|
|
152
|
+
"id": 1,
|
|
153
|
+
"parent": 0,
|
|
154
|
+
"children": [
|
|
155
|
+
{
|
|
156
|
+
"id": 3,
|
|
157
|
+
"parent": 1,
|
|
158
|
+
"children": [
|
|
159
|
+
{
|
|
160
|
+
"id": 5,
|
|
161
|
+
"parent": 3,
|
|
162
|
+
"children": [] // 追加した
|
|
163
|
+
}
|
|
164
|
+
]
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"id": 2,
|
|
170
|
+
"parent": 0,
|
|
171
|
+
"children": [
|
|
172
|
+
{
|
|
173
|
+
"id": 4,
|
|
174
|
+
"parent": 2,
|
|
175
|
+
"children": [] // 元々、存在している
|
|
176
|
+
}
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
];
|
|
180
|
+
|
|
181
|
+
console.log(JSON.stringify(rootObject.children)); // [{"id":1,"parent":0,"children":[{"id":3,"parent":1,"children":[{"id":5,"parent":3,"children":[]}]}]},{"id":2,"parent":0,"children":[{"id":4,"parent":2,"children":[]}]}]
|
|
182
|
+
console.log(JSON.stringify(after)); // [{"id":1,"parent":0,"children":[{"id":3,"parent":1,"children":[{"id":5,"parent":3,"children":[]}]}]},{"id":2,"parent":0,"children":[{"id":4,"parent":2,"children":[]}]}]
|
|
183
|
+
console.log(JSON.stringify(rootObject.children) === JSON.stringify(after)); // true
|
|
184
|
+
}());
|
|
185
|
+
```
|
|
186
|
+
|
|
81
187
|
Re: hikakin さん
|