回答編集履歴

3

変数名をわかりやすく変更

2021/08/13 10:26

投稿

taku-hu
taku-hu

スコア176

test CHANGED
@@ -174,17 +174,17 @@
174
174
 
175
175
 
176
176
 
177
- const file = invoices.reduce((data, invoice) => {
177
+ const file = invoices.reduce((data, currentInvoice) => {
178
178
 
179
179
  const item = preFile.flatMap(({ invoice_code, file_code, file_name }) =>
180
180
 
181
181
  // invoiceが対応しているアイテムのキー名を変えて新しいオブジェクトとして返す
182
182
 
183
- invoice === invoice_code ? { value: file_code, label: file_name } : []
183
+ currentInvoice === invoice_code ? { value: file_code, label: file_name } : []
184
184
 
185
185
  )
186
186
 
187
- return { ...data, [invoice]: item }
187
+ return { ...data, [currentInvoice]: item }
188
188
 
189
189
  }, {})
190
190
 
@@ -204,7 +204,7 @@
204
204
 
205
205
  // invoiceが対応しているアイテムのキー名を変えて新しいオブジェクトとして返す
206
206
 
207
- invoice === invoice_code ? { value: file_code, label: file_name } : []
207
+ currentInvoice === invoice_code ? { value: file_code, label: file_name } : []
208
208
 
209
209
  )
210
210
 
@@ -214,7 +214,7 @@
214
214
 
215
215
  ```JavaScript
216
216
 
217
- const item = preFile.filter(({ invoice_code }) => invoice === invoice_code).map(({ file_code, file_name }) => ({ value: file_code, label: file_name }))
217
+ const item = preFile.filter(({ invoice_code }) => currentInvoice === invoice_code).map(({ file_code, file_name }) => ({ value: file_code, label: file_name }))
218
218
 
219
219
  ```
220
220
 

2

読みやすく順番を編集

2021/08/13 10:26

投稿

taku-hu
taku-hu

スコア176

test CHANGED
@@ -2,6 +2,200 @@
2
2
 
3
3
 
4
4
 
5
+ [動作デモ](https://codesandbox.io/s/funny-wozniak-8wyww?file=/src/index.js)
6
+
7
+
8
+
9
+ ```JavaScript
10
+
11
+ // API
12
+
13
+ const response = {
14
+
15
+ invoice: [
16
+
17
+ {
18
+
19
+ invoice_code: "0000001",
20
+
21
+ invoice_name: "請求書A"
22
+
23
+ },
24
+
25
+ {
26
+
27
+ invoice_code: "0000002",
28
+
29
+ invoice_name: "請求書B"
30
+
31
+ },
32
+
33
+ {
34
+
35
+ invoice_code: "0000003",
36
+
37
+ invoice_name: "請求書C"
38
+
39
+ },
40
+
41
+ {
42
+
43
+ invoice_code: "0000004",
44
+
45
+ invoice_name: "請求書D"
46
+
47
+ }
48
+
49
+ ],
50
+
51
+ file: [
52
+
53
+ {
54
+
55
+ invoice_code: "0000001",
56
+
57
+ file_code: "0000001",
58
+
59
+ file_name: "ファイル"
60
+
61
+ },
62
+
63
+ {
64
+
65
+ invoice_code: "0000001",
66
+
67
+ file_code: "0000002",
68
+
69
+ file_name: "ファイルa"
70
+
71
+ },
72
+
73
+ {
74
+
75
+ invoice_code: "0000001",
76
+
77
+ file_code: "0000003",
78
+
79
+ file_name: "ファイルb"
80
+
81
+ },
82
+
83
+ {
84
+
85
+ invoice_code: "0000001",
86
+
87
+ file_code: "0000004",
88
+
89
+ file_name: "ファイルc"
90
+
91
+ },
92
+
93
+ {
94
+
95
+ invoice_code: "0000001",
96
+
97
+ file_code: "0000005",
98
+
99
+ file_name: "ファイルd"
100
+
101
+ },
102
+
103
+ {
104
+
105
+ invoice_code: "0000002",
106
+
107
+ file_code: "0000009",
108
+
109
+ file_name: "請求書Bファイル1"
110
+
111
+ },
112
+
113
+ {
114
+
115
+ invoice_code: "0000002",
116
+
117
+ file_code: "0000010",
118
+
119
+ file_name: "請求書Bファイル2"
120
+
121
+ },
122
+
123
+ {
124
+
125
+ invoice_code: "0000003",
126
+
127
+ file_code: "0000011",
128
+
129
+ file_name: "請求書Cファイル1"
130
+
131
+ },
132
+
133
+ {
134
+
135
+ invoice_code: "0000003",
136
+
137
+ file_code: "0000012",
138
+
139
+ file_name: "請求書Cファイル2"
140
+
141
+ },
142
+
143
+ {
144
+
145
+ invoice_code: "0000002",
146
+
147
+ file_code: "0000013",
148
+
149
+ file_name: "TLファイル1"
150
+
151
+ },
152
+
153
+ {
154
+
155
+ invoice_code: "0000004",
156
+
157
+ file_code: "0000014",
158
+
159
+ file_name: "請求書00用ファイル"
160
+
161
+ }
162
+
163
+ ]
164
+
165
+ }
166
+
167
+
168
+
169
+ const { invoice, file: preFile } = response
170
+
171
+ // 存在するinvoiceのリスト
172
+
173
+ const invoices = invoice.map(({ invoice_code }) => invoice_code)
174
+
175
+
176
+
177
+ const file = invoices.reduce((data, invoice) => {
178
+
179
+ const item = preFile.flatMap(({ invoice_code, file_code, file_name }) =>
180
+
181
+ // invoiceが対応しているアイテムのキー名を変えて新しいオブジェクトとして返す
182
+
183
+ invoice === invoice_code ? { value: file_code, label: file_name } : []
184
+
185
+ )
186
+
187
+ return { ...data, [invoice]: item }
188
+
189
+ }, {})
190
+
191
+
192
+
193
+ console.log(file)
194
+
195
+ ```
196
+
197
+
198
+
5
199
  ※`flatMap`の部分は`map`と`filter`をそれぞれ使っても良いと思います。
6
200
 
7
201
  ```JavaScript
@@ -25,201 +219,3 @@
25
219
  ```
26
220
 
27
221
  と同じ。
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
- [動作デモ](https://codesandbox.io/s/funny-wozniak-8wyww?file=/src/index.js)
36
-
37
- ```JavaScript
38
-
39
- // API
40
-
41
- const response = {
42
-
43
- invoice: [
44
-
45
- {
46
-
47
- invoice_code: "0000001",
48
-
49
- invoice_name: "請求書A"
50
-
51
- },
52
-
53
- {
54
-
55
- invoice_code: "0000002",
56
-
57
- invoice_name: "請求書B"
58
-
59
- },
60
-
61
- {
62
-
63
- invoice_code: "0000003",
64
-
65
- invoice_name: "請求書C"
66
-
67
- },
68
-
69
- {
70
-
71
- invoice_code: "0000004",
72
-
73
- invoice_name: "請求書D"
74
-
75
- }
76
-
77
- ],
78
-
79
- file: [
80
-
81
- {
82
-
83
- invoice_code: "0000001",
84
-
85
- file_code: "0000001",
86
-
87
- file_name: "ファイル"
88
-
89
- },
90
-
91
- {
92
-
93
- invoice_code: "0000001",
94
-
95
- file_code: "0000002",
96
-
97
- file_name: "ファイルa"
98
-
99
- },
100
-
101
- {
102
-
103
- invoice_code: "0000001",
104
-
105
- file_code: "0000003",
106
-
107
- file_name: "ファイルb"
108
-
109
- },
110
-
111
- {
112
-
113
- invoice_code: "0000001",
114
-
115
- file_code: "0000004",
116
-
117
- file_name: "ファイルc"
118
-
119
- },
120
-
121
- {
122
-
123
- invoice_code: "0000001",
124
-
125
- file_code: "0000005",
126
-
127
- file_name: "ファイルd"
128
-
129
- },
130
-
131
- {
132
-
133
- invoice_code: "0000002",
134
-
135
- file_code: "0000009",
136
-
137
- file_name: "請求書Bファイル1"
138
-
139
- },
140
-
141
- {
142
-
143
- invoice_code: "0000002",
144
-
145
- file_code: "0000010",
146
-
147
- file_name: "請求書Bファイル2"
148
-
149
- },
150
-
151
- {
152
-
153
- invoice_code: "0000003",
154
-
155
- file_code: "0000011",
156
-
157
- file_name: "請求書Cファイル1"
158
-
159
- },
160
-
161
- {
162
-
163
- invoice_code: "0000003",
164
-
165
- file_code: "0000012",
166
-
167
- file_name: "請求書Cファイル2"
168
-
169
- },
170
-
171
- {
172
-
173
- invoice_code: "0000002",
174
-
175
- file_code: "0000013",
176
-
177
- file_name: "TLファイル1"
178
-
179
- },
180
-
181
- {
182
-
183
- invoice_code: "0000004",
184
-
185
- file_code: "0000014",
186
-
187
- file_name: "請求書00用ファイル"
188
-
189
- }
190
-
191
- ]
192
-
193
- }
194
-
195
-
196
-
197
- const { invoice, file: preFile } = response
198
-
199
- // 存在するinvoiceのリスト
200
-
201
- const invoices = invoice.map(({ invoice_code }) => invoice_code)
202
-
203
-
204
-
205
- const file = invoices.reduce((data, invoice) => {
206
-
207
- const item = preFile.flatMap(({ invoice_code, file_code, file_name }) =>
208
-
209
- // invoiceが対応しているアイテムのキー名を変えて新しいオブジェクトとして返す
210
-
211
- invoice === invoice_code ? { value: file_code, label: file_name } : []
212
-
213
- )
214
-
215
- return { ...data, [invoice]: item }
216
-
217
- }, {})
218
-
219
-
220
-
221
- console.log(file)
222
-
223
-
224
-
225
- ```

1

内容の補足

2021/08/13 10:08

投稿

taku-hu
taku-hu

スコア176

test CHANGED
@@ -4,12 +4,36 @@
4
4
 
5
5
  ※`flatMap`の部分は`map`と`filter`をそれぞれ使っても良いと思います。
6
6
 
7
+ ```JavaScript
8
+
9
+ const item = preFile.flatMap(({ invoice_code, file_code, file_name }) =>
10
+
11
+ // invoiceが対応しているアイテムのキー名を変えて新しいオブジェクトとして返す
12
+
13
+ invoice === invoice_code ? { value: file_code, label: file_name } : []
14
+
15
+ )
16
+
17
+ ```
18
+
19
+
20
+
21
+ ```JavaScript
22
+
23
+ const item = preFile.filter(({ invoice_code }) => invoice === invoice_code).map(({ file_code, file_name }) => ({ value: file_code, label: file_name }))
24
+
25
+ ```
26
+
27
+ と同じ。
28
+
29
+
30
+
31
+
32
+
7
33
 
8
34
 
9
35
  [動作デモ](https://codesandbox.io/s/funny-wozniak-8wyww?file=/src/index.js)
10
36
 
11
-
12
-
13
37
  ```JavaScript
14
38
 
15
39
  // API