teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問TypeScript配列の特殊なソート

編集履歴

質問編集履歴

14

マルチポストであることの報告

2018/08/14 10:31

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -272,4 +272,10 @@
272
272
 
273
273
  ただし、これはグループ化をしておらず、一階層目だけでオブジェクトを入れ替えているだけです。
274
274
  階層構造も含めて
275
- updatedObjectと同じ構造にしたいです...
275
+ updatedObjectと同じ構造にしたいです...
276
+
277
+ -追記-
278
+ https://ja.stackoverflow.com/questions/47499/typescript-%E9%85%8D%E5%88%97%E3%81%AE%E7%89%B9%E6%AE%8A%E3%81%AA%E3%82%BD%E3%83%BC%E3%83%88
279
+
280
+ こちら、スタックオーバーフローにほとんど同じ質問をしたところ、マルチポストであるというご指摘を頂きました。
281
+ 配列をソートする方法自体に関しては、スタックオーバーフローの方で回答をいただけました。

13

誤字修正

2018/08/14 10:31

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -265,7 +265,7 @@
265
265
  this.objectList = []
266
266
 
267
267
  for(var i = 0; i < updatedObjectList.length; i++){
268
- this.shapeList.unshift(Enumerable.asEnumerable(shapeList).Where(x=>x.shapeId==updatedObjectList[i].shapeId).ToArray()[0])
268
+ this.objectList.unshift(Enumerable.asEnumerable(objectList).Where(x=>x.objectId==updatedObjectList[i].objectId).ToArray()[0])
269
269
  }
270
270
 
271
271
  ```

12

追記

2018/08/13 10:19

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -252,4 +252,24 @@
252
252
 
253
253
  このようにobjectDataにも関数はありますし、outerRectにも関数があるのですが、それらが順番を変えたりすると(objectList = updatedObjectListをすると)、消えてしまいます。
254
254
 
255
- data.outerRect.function is not a function とエラーが出てしまいます。
255
+ data.outerRect.function is not a function とエラーが出てしまいます。
256
+
257
+ -追記-
258
+
259
+ そしてやはり並び替えだとうまくいきます
260
+
261
+ ```typescript
262
+
263
+ let objectList = this.objectList
264
+
265
+ this.objectList = []
266
+
267
+ for(var i = 0; i < updatedObjectList.length; i++){
268
+ this.shapeList.unshift(Enumerable.asEnumerable(shapeList).Where(x=>x.shapeId==updatedObjectList[i].shapeId).ToArray()[0])
269
+ }
270
+
271
+ ```
272
+
273
+ ただし、これはグループ化をしておらず、一階層目だけでオブジェクトを入れ替えているだけです。
274
+ 階層構造も含めて
275
+ updatedObjectと同じ構造にしたいです...

11

修正

2018/08/13 09:59

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -210,6 +210,7 @@
210
210
 
211
211
  if(object.objectType == "imageObject"){
212
212
  this.data = new ImageObject(object)
213
+ //imageObjectはobjectDataをextendしている
213
214
  }
214
215
  }
215
216
 

10

追記

2018/08/13 09:32

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -218,7 +218,6 @@
218
218
 
219
219
  ```typescript
220
220
 
221
- import { InnerRect } from './rect/innerRect'
222
221
  import { OuterRect } from './rect/outerRect'
223
222
 
224
223
  /** 挿入データ(文字とか画像とか)の状態のうち、全てのデータで共有する要素 */

9

追記

2018/08/13 08:05

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -214,4 +214,42 @@
214
214
  }
215
215
 
216
216
  }
217
- ```
217
+ ```
218
+
219
+ ```typescript
220
+
221
+ import { InnerRect } from './rect/innerRect'
222
+ import { OuterRect } from './rect/outerRect'
223
+
224
+ /** 挿入データ(文字とか画像とか)の状態のうち、全てのデータで共有する要素 */
225
+ export class ObjectData{
226
+
227
+ public objectId : number = 0
228
+
229
+ public objectType : string = ""
230
+
231
+ public name : string = ""
232
+
233
+ public selected : boolean = false
234
+
235
+ public outerRect : OuterRect = new OuterRect("string")
236
+
237
+ constructor(objectType : string){
238
+ this.objectType = objectType
239
+ if(objectType!=""){
240
+ this.outerRect = new OuterRect(objectType)
241
+ }
242
+ }
243
+
244
+ public changeState(state : { value : string , stateType : string }){
245
+
246
+
247
+ }
248
+
249
+ }
250
+
251
+ ```
252
+
253
+ このようにobjectDataにも関数はありますし、outerRectにも関数があるのですが、それらが順番を変えたりすると(objectList = updatedObjectListをすると)、消えてしまいます。
254
+
255
+ data.outerRect.function is not a function とエラーが出てしまいます。

8

追記

2018/08/13 08:04

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -191,6 +191,7 @@
191
191
  -追記-
192
192
 
193
193
  dataにプロパティで任意のプロパティを持っても、関数が渡されなかった
194
+ 以下はvuexのルートモデルの一部
194
195
 
195
196
  ```typescript
196
197
  import { ImageObject } from './image/imageObject'

7

追記

2018/08/13 07:25

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -186,4 +186,31 @@
186
186
  そして、子はchildrenという名前のパラメーターに入ります。
187
187
  しかし、childrenに格納することに加えて、同じものを、objectListというパラメーターに格納したいです。
188
188
  linq-es2015という,typescript用のlinqモジュールも使えますので、linqを使うこともできます。
189
- ただc#のlinqと全く同じメソッドが定義されている訳ではありません。
189
+ ただc#のlinqと全く同じメソッドが定義されている訳ではありません。
190
+
191
+ -追記-
192
+
193
+ dataにプロパティで任意のプロパティを持っても、関数が渡されなかった
194
+
195
+ ```typescript
196
+ import { ImageObject } from './image/imageObject'
197
+
198
+ import { ObjectData } from './objectData'
199
+
200
+ export class Object{
201
+
202
+ public title : string = ""
203
+
204
+ public isLeaf : boolean = true
205
+
206
+ public data : ObjectData = new ObjectData("")
207
+
208
+ constructor(object : {objectType : string , objectId : number}){
209
+
210
+ if(object.objectType == "imageObject"){
211
+ this.data = new ImageObject(object)
212
+ }
213
+ }
214
+
215
+ }
216
+ ```

6

追記修正(linq-es2015も使用可能)

2018/08/13 07:21

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -184,4 +184,6 @@
184
184
 
185
185
  というパラメーターを持ちます。
186
186
  そして、子はchildrenという名前のパラメーターに入ります。
187
- しかし、childrenに格納することに加えて、同じものを、objectListというパラメーターに格納したいです。
187
+ しかし、childrenに格納することに加えて、同じものを、objectListというパラメーターに格納したいです。
188
+ linq-es2015という,typescript用のlinqモジュールも使えますので、linqを使うこともできます。
189
+ ただc#のlinqと全く同じメソッドが定義されている訳ではありません。

5

誤字

2018/08/13 04:00

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- 少し説明が難しのですが、なるべくコードなども簡略化してみますので、読んでくだされば幸いです(T_T)
1
+ 少し説明が難しいのですが、なるべくコードなども簡略化してみますので、読んでくだされば幸いです(T_T)
2
2
 
3
3
  https://github.com/holiber/sl-vue-tree
4
4
 

4

修正

2018/08/13 03:56

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- 少し説明が難しのですが、頑張ってなるべくコードなども簡略化してみますので、読んでくだされば幸いです(T_T)
1
+ 少し説明が難しのですが、なるべくコードなども簡略化してみますので、読んでくだされば幸いです(T_T)
2
2
 
3
3
  https://github.com/holiber/sl-vue-tree
4
4
 

3

修正

2018/08/13 03:56

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -50,6 +50,7 @@
50
50
  ```
51
51
 
52
52
  vuexとこちらのライブラリを組み合わせる場合、上のように、getとsetを使います。
53
+ setはドラッグ&ドロップした時に呼ばれます。
53
54
 
54
55
  set objectList(updatedObjectList) {
55
56
  this.$store.dispatch('edit/sortObjectList' , updatedObjectList)
@@ -64,6 +65,7 @@
64
65
  }
65
66
 
66
67
  ここが変化し、ソートができます。
68
+ データはgetとバインドされています。
67
69
 
68
70
  しかし、こちらのライブラリ、
69
71
  objectListのモデルに含まれた"関数"に関しては、updatedObjectListに入ってくれないです。
@@ -90,27 +92,35 @@
90
92
  {
91
93
  objectId : 1,
92
94
  objectName : "オブジェクト1",
93
- objectList : []
95
+ objectList : [],
96
+ isLeaf : false,
97
+ children : []
94
98
  },
95
99
  {
96
100
  objectId : 2,
97
101
  objectName : "オブジェクト2",
98
- objectList : []
102
+ objectList : [],
103
+ isLeaf : true
99
104
  },
100
105
  {
101
106
  objectId : 3,
102
107
  objectName : "オブジェクト3",
103
- objectList : []
108
+ objectList : [],
109
+ isLeaf : false,
110
+ children : []
104
111
  },
105
112
  {
106
113
  objectId : 4,
107
114
  objectName : "オブジェクト4",
108
- objectList : []
115
+ objectList : [],
116
+ isLeaf : true
109
117
  },
110
118
  {
111
119
  objectId : 5,
112
120
  objectName : "オブジェクト5",
113
- objectList : []
121
+ objectList : [],
122
+ isLeaf : false,
123
+ children : []
114
124
  },
115
125
 
116
126
  ]
@@ -126,7 +136,9 @@
126
136
  {
127
137
  objectId : 5,
128
138
  objectName : "オブジェクト5",
129
- objectList : []
139
+ objectList : [],
140
+ isLeaf : false,
141
+ children : []
130
142
  },
131
143
  {
132
144
  objectId : 3,
@@ -137,7 +149,8 @@
137
149
  {
138
150
  objectId : 2,
139
151
  objectName : "オブジェクト2",
140
- objectList : []
152
+ objectList : [],
153
+ isLeaf : true
141
154
  },
142
155
  {
143
156
  objectId : 1,
@@ -148,7 +161,8 @@
148
161
  {
149
162
  objectId : 4,
150
163
  objectName : "オブジェクト4",
151
- objectList : []
164
+ objectList : [],
165
+ isLeaf : true
152
166
  },
153
167
  ]
154
168
  },
@@ -164,47 +178,10 @@
164
178
 
165
179
  "objectListをソートして、"updatedObjectListと同じ構造にするためにはどのようにすればよろしいでしょうか。
166
180
 
167
- あと、グループ化(階層構造)にした場合、
181
+ 親になることができるobjectは
168
- 親は
169
182
 
170
183
  isLeaf : false
171
184
 
172
185
  というパラメーターを持ちます。
173
186
  そして、子はchildrenという名前のパラメーターに入ります。
174
- しかし、childrenではなく、objectListというパラメーターに格納したいです。
187
+ しかし、childrenに格納することに加えて、同じものを、objectListというパラメーターに格納したいです。
175
- 従ってソートによって
176
-
177
- ```typescript
178
- let objectList = [
179
- {
180
- objectId : 5,
181
- objectName : "オブジェクト5",
182
- objectList : []
183
- },
184
- {
185
- objectId : 3,
186
- objectName : "オブジェクト3",
187
- objectList : [
188
- {
189
- objectId : 2,
190
- objectName : "オブジェクト2",
191
- objectList : []
192
- },
193
- {
194
- objectId : 1,
195
- objectName : "オブジェクト1",
196
- objectList : [
197
- {
198
- objectId : 4,
199
- objectName : "オブジェクト4",
200
- objectList : []
201
- },
202
- ]
203
- },
204
- ]
205
- }
206
- ]
207
- ```
208
-
209
- このようなものを作りたいです
210
- ※childrenやisLeafのパラメーターは特に消す必要はありません。

2

誤字修正

2018/08/13 03:56

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -49,7 +49,7 @@
49
49
 
50
50
  ```
51
51
 
52
- vuexとこちらのライブラリを組み合わせる場合、上のように、getとsetを使い、
52
+ vuexとこちらのライブラリを組み合わせる場合、上のように、getとsetを使います。
53
53
 
54
54
  set objectList(updatedObjectList) {
55
55
  this.$store.dispatch('edit/sortObjectList' , updatedObjectList)

1

重要な補足の追加

2018/08/13 03:27

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -131,7 +131,9 @@
131
131
  {
132
132
  objectId : 3,
133
133
  objectName : "オブジェクト3",
134
- objectList : [
134
+ 　　 objectList : [],
135
+ isLeaf : false,
136
+ children : [
135
137
  {
136
138
  objectId : 2,
137
139
  objectName : "オブジェクト2",
@@ -140,7 +142,9 @@
140
142
  {
141
143
  objectId : 1,
142
144
  objectName : "オブジェクト1",
143
- objectList : [
145
+ objectList : [],
146
+ isLeaf : false,
147
+ children : [
144
148
  {
145
149
  objectId : 4,
146
150
  objectName : "オブジェクト4",
@@ -158,4 +162,49 @@
158
162
 
159
163
  objectList = updatedObjectListとするのではなく
160
164
 
161
- "objectListをソートして、"updatedObjectListと同じ構造にするためにはどのようにすればよろしいでしょうか。
165
+ "objectListをソートして、"updatedObjectListと同じ構造にするためにはどのようにすればよろしいでしょうか。
166
+
167
+ あと、グループ化(階層構造)にした場合、
168
+ 親は
169
+
170
+ isLeaf : false
171
+
172
+ というパラメーターを持ちます。
173
+ そして、子はchildrenという名前のパラメーターに入ります。
174
+ しかし、childrenではなく、objectListというパラメーターに格納したいです。
175
+ 従ってソートによって
176
+
177
+ ```typescript
178
+ let objectList = [
179
+ {
180
+ objectId : 5,
181
+ objectName : "オブジェクト5",
182
+ objectList : []
183
+ },
184
+ {
185
+ objectId : 3,
186
+ objectName : "オブジェクト3",
187
+ objectList : [
188
+ {
189
+ objectId : 2,
190
+ objectName : "オブジェクト2",
191
+ objectList : []
192
+ },
193
+ {
194
+ objectId : 1,
195
+ objectName : "オブジェクト1",
196
+ objectList : [
197
+ {
198
+ objectId : 4,
199
+ objectName : "オブジェクト4",
200
+ objectList : []
201
+ },
202
+ ]
203
+ },
204
+ ]
205
+ }
206
+ ]
207
+ ```
208
+
209
+ このようなものを作りたいです
210
+ ※childrenやisLeafのパラメーターは特に消す必要はありません。