回答編集履歴

1

要件を忠実に再現したコードを追記

2017/07/18 01:51

投稿

think49
think49

スコア18170

test CHANGED
@@ -1,4 +1,8 @@
1
- 仮想DOM的な何か。
1
+ ### DOM API 互換コード
2
+
3
+
4
+
5
+ 設計がDOMと似通っていたので、完全にDOM互換にしてみました。
2
6
 
3
7
 
4
8
 
@@ -158,4 +162,212 @@
158
162
 
159
163
 
160
164
 
165
+ ### 要件を忠実に再現したコード
166
+
167
+
168
+
169
+ DOM互換に拘らず、要件を再現したコード。
170
+
171
+ ただし、「整形後のコード」では次の部分が異なります。
172
+
173
+
174
+
175
+ - `SyntaxError` が出ていた部分に `,` を追加した。
176
+
177
+ - 質問文には `before[0].children[0].children[0].children` が存在せず、`before[1].children[0].children === []` が存在する為、整合性が取れない。`children` が存在する方に統一した。
178
+
179
+
180
+
181
+ jsfiddleサンプル。
182
+
183
+
184
+
185
+ - [親子関係のあるオブジェクトを生成する - JSFiddle](https://jsfiddle.net/nvqojb2L/)
186
+
187
+
188
+
189
+ ```JavaScript
190
+
191
+ 'use strict';
192
+
193
+ (function () {
194
+
195
+ function getElementById (elementList, id) {
196
+
197
+ // id = String(id);
198
+
199
+
200
+
201
+ for (var i = 0, len = elementList.length, element; i < len; ++i) {
202
+
203
+ element = elementList[i];
204
+
205
+
206
+
207
+ if (element.id === id) {
208
+
209
+ return element;
210
+
211
+ }
212
+
213
+ }
214
+
215
+
216
+
217
+ return null;
218
+
219
+ }
220
+
221
+
222
+
223
+ function appendChild (parentObject, childObject) {
224
+
225
+ Array.isArray(parentObject.children) ? parentObject.children.push(childObject) : parentObject.children = [childObject];
226
+
227
+ }
228
+
229
+
230
+
231
+ var before = [
232
+
233
+ {
234
+
235
+ "id": 1,
236
+
237
+ "parent": 0
238
+
239
+ },
240
+
241
+ {
242
+
243
+ "id": 2,
244
+
245
+ "parent": 0
246
+
247
+ },
248
+
249
+ {
250
+
251
+ "id": 3,
252
+
253
+ "parent": 1
254
+
255
+ },
256
+
257
+ {
258
+
259
+ "id": 4,
260
+
261
+ "parent": 2
262
+
263
+ },
264
+
265
+ {
266
+
267
+ "id": 5,
268
+
269
+ "parent": 3
270
+
271
+ }
272
+
273
+ ];
274
+
275
+
276
+
277
+ var rootObject = {"id": 0};
278
+
279
+
280
+
281
+ before.forEach(function (object, i) {
282
+
283
+ if (!Array.isArray(object.children)) {
284
+
285
+ object.children = [];
286
+
287
+ }
288
+
289
+
290
+
291
+ appendChild(object.parent !== 0 ? getElementById(before, object.parent) : rootObject, object);
292
+
293
+ });
294
+
295
+
296
+
297
+ // 期待する整形後のコード
298
+
299
+ var after = [
300
+
301
+ {
302
+
303
+ "id": 1,
304
+
305
+ "parent": 0,
306
+
307
+ "children": [
308
+
309
+ {
310
+
311
+ "id": 3,
312
+
313
+ "parent": 1,
314
+
315
+ "children": [
316
+
317
+ {
318
+
319
+ "id": 5,
320
+
321
+ "parent": 3,
322
+
323
+ "children": [] // 追加した
324
+
325
+ }
326
+
327
+ ]
328
+
329
+ }
330
+
331
+ ]
332
+
333
+ },
334
+
335
+ {
336
+
337
+ "id": 2,
338
+
339
+ "parent": 0,
340
+
341
+ "children": [
342
+
343
+ {
344
+
345
+ "id": 4,
346
+
347
+ "parent": 2,
348
+
349
+ "children": [] // 元々、存在している
350
+
351
+ }
352
+
353
+ ]
354
+
355
+ }
356
+
357
+ ];
358
+
359
+
360
+
361
+ 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":[]}]}]
362
+
363
+ 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":[]}]}]
364
+
365
+ console.log(JSON.stringify(rootObject.children) === JSON.stringify(after)); // true
366
+
367
+ }());
368
+
369
+ ```
370
+
371
+
372
+
161
373
  Re: hikakin さん