teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問javascriptで配列→ネスト構造のオブジェクトにする方法

編集履歴

回答編集履歴

4

typo 修正

2020/09/16 10:52

投稿

AkitoshiManabe
AkitoshiManabe

スコア5432

test CHANGED
@@ -14,134 +14,132 @@
14
14
 
15
15
  class Node {
16
16
 
17
+
18
+
19
+ constructor ( id ) {
20
+
21
+ this.parent = null
22
+
23
+ this.id = id;
24
+
25
+ this.children = [];
26
+
27
+ }
28
+
29
+ hasChildNodes () {
30
+
31
+ return !!this.children.length;
32
+
33
+ }
34
+
35
+ appendChild( node ) {
36
+
37
+ if( Node.isNode(node) ) {
38
+
39
+ node.parent = this; // parent
40
+
41
+ this.children.push( node );
42
+
43
+ }
44
+
45
+ }
46
+
47
+ removeChild( node ) {
48
+
49
+ if( this.parent && Node.isNode(node) ) {
50
+
51
+ let idx = this.children.indexOf( node );
52
+
53
+ if( ~idx ) {
54
+
55
+ this.children.splice( idx, 1 );
56
+
57
+ node.parent = null; // parent
58
+
59
+ }
60
+
61
+ }
62
+
63
+ }
64
+
65
+ getNodeById ( id ) {
66
+
67
+ if( this.id === id ) return this;
68
+
69
+ let rslt;
70
+
71
+ if( this.hasChildNodes() ) {
72
+
73
+ this.children.some( child => (rslt = child).id === id );
74
+
75
+ }
76
+
77
+ return rslt;
78
+
79
+ }
80
+
81
+
82
+
83
+ toJson () {
84
+
85
+ let
86
+
87
+ { id, children } = this,
88
+
89
+ childNodes = []
90
+
91
+ ;
92
+
93
+ if( this.hasChildNodes() ) {
94
+
95
+ children.forEach( child => childNodes.push( child.toJson() ) );
96
+
97
+ children = childNodes;
98
+
99
+ }
100
+
101
+ return { id, children };
102
+
103
+ }
104
+
105
+
106
+
17
107
  static isNode( node ) {
18
108
 
19
109
  return node instanceof Node;
20
110
 
21
111
  }
22
112
 
113
+
114
+
115
+ static fromDatas ( datas ) {
116
+
117
+ let rootNode;
118
+
119
+ for ( let {id, parent} of datas ) {
120
+
121
+ let
122
+
23
- constructor ( id ) {
123
+ node = new Node( id ),
24
-
124
+
25
- this.parent = null
125
+ parentNode = null
26
-
27
- this.id = id;
126
+
28
-
29
- this.children = [];
30
-
31
- }
127
+ ;
32
-
33
- hasChildNodes () {
128
+
34
-
35
- return !!this.children.length;
36
-
37
- }
38
-
39
- appendChild( node ) {
40
-
41
- if( Node.isNode(node) ) {
42
-
43
- node.parent = this;
44
-
45
- this.children.push( node );
46
-
47
- }
48
-
49
- }
50
-
51
- removeChild( node ) {
52
-
53
- if( this.parent && Node.isNode(node) ) {
54
-
55
- let idx = this.children.indexOf( node );
56
-
57
- if( ~idx ) {
129
+ if( !rootNode ) {
58
-
130
+
59
- this.children.splice( idx, 1 );
131
+ rootNode = new Node(id);
60
-
61
- node.parent = null;
62
132
 
63
133
  }
64
134
 
65
- }
66
-
67
- }
68
-
69
- getNodeById ( id ) {
70
-
71
- if( this.id === id ) return this;
72
-
73
- let rslt;
74
-
75
- if( this.hasChildNodes() ) {
76
-
77
- this.children.some( child => (rslt = child).id === id );
78
-
79
- }
80
-
81
- return rslt;
82
-
83
- }
84
-
85
- append( ...nodes ) {
86
-
87
- nodes.forEach( this.appendChild )
88
-
89
- }
90
-
91
-
92
-
93
- toJson () {
94
-
95
- let
96
-
97
- { id, children } = this,
98
-
99
- childNodes = []
100
-
101
- ;
102
-
103
- if( this.hasChildNodes() ) {
104
-
105
- children.forEach( child => childNodes.push( child.toJson() ) );
106
-
107
- children = childNodes;
108
-
109
- }
110
-
111
- return { id, children };
112
-
113
- }
114
-
115
-
116
-
117
- static fromDatas ( datas ) {
118
-
119
- let rootNode;
120
-
121
- for ( let {id, parent} of datas ) {
135
+ else if( parent!==null ) {
122
-
123
- let
136
+
124
-
125
- node = new Node( id ),
137
+ parentNode = rootNode.getNodeById( parent );
126
-
127
- parentNode = null
138
+
128
-
129
- ;
130
-
131
- if( !rootNode ) {
132
-
133
- rootNode = new Node(id);
139
+ parentNode.appendChild( node );
134
140
 
135
141
  }
136
142
 
137
- else if( parent!==null ) {
138
-
139
- parentNode = rootNode.getNodeById( parent );
140
-
141
- parentNode.appendChild( node );
142
-
143
- }
144
-
145
143
  }
146
144
 
147
145
  return rootNode;
@@ -176,7 +174,7 @@
176
174
 
177
175
 
178
176
 
179
- console.log( JSON.stringify([ tree ], null, 2) )
177
+ console.log( tree1 ); // { id, parent, children } ： ルートノード
180
178
 
181
179
 
182
180
 

3

typo 修正

2020/09/16 10:52

投稿

AkitoshiManabe
AkitoshiManabe

スコア5432

test CHANGED
File without changes

2

追記

2020/09/16 10:52

投稿

AkitoshiManabe
AkitoshiManabe

スコア5432

test CHANGED
@@ -243,3 +243,13 @@
243
243
  console.log( JSON.stringify( tree, null, 2) )
244
244
 
245
245
  ```
246
+
247
+ ----
248
+
249
+ 追記）
250
+
251
+
252
+
253
+ DOM ライクな実装は「ルートが１つ」に制限されますが、「文書断片を意味するノードをルートとする」ことを考えれば、その断片がもつ children を tree の Collection とするアイディアになります。
254
+
255
+ （上記回答では未実装です）

1

訂正

2020/09/16 10:42

投稿

AkitoshiManabe
AkitoshiManabe

スコア5432

test CHANGED
@@ -224,7 +224,7 @@
224
224
 
225
225
 
226
226
 
227
- var tree = [ tree2 ]; // 探索用に collection ライクにする。
227
+ var tree = [ tree2.toJson() ]; // 探索用に collection ライクにする。
228
228
 
229
229
  console.log( tree );
230
230
 
@@ -240,6 +240,6 @@
240
240
 
241
241
 
242
242
 
243
- console.log( JSON.stringify([ tree2.toJson() ], null, 2) )
243
+ console.log( JSON.stringify( tree, null, 2) )
244
244
 
245
245
  ```