APIで取得した配列を、キーごとにまとめてオブジェクトに格納したい

Nuxt.jsで、Webアプリを作っています。
APIで取得した値（invoice, file）を使用して、選択されたinvoiceに応じて表示させるfile一覧を変えたい…のですが、invoiceの取り出しはうまくいったものの、fileの情報がうまく変換できず悩んでいます。

やりたいことは、
下記オブジェクトfileを、invoice_codeの値に応じて同じキーでまとめて、配列に入れる…ということです。

API

Javascript
1{
2"invoice": [
3  {
4    "invoice_code": "0000001",
5    "invoice_name": "請求書A"
6  },
7  {
8    "invoice_code": "0000002",
9    "invoice_name": "請求書B"
10  },
11  {
12    "invoice_code": "0000003",
13    "invoice_name": "請求書C"
14  },
15  {
16    "invoice_code": "0000004",
17    "invoice_name": "請求書D"
18  }
19  ],
20"file": [
21  {
22    "invoice_code": "0000001",
23    "file_code": "0000001",
24    "file_name": "ファイル"
25  },
26  {
27    "invoice_code": "0000001",
28    "file_code": "0000002",
29    "file_name": "ファイルa"
30  },
31  {
32    "invoice_code": "0000001",
33    "file_code": "0000003",
34    "file_name": "ファイルb"
35  },
36  {
37    "invoice_code": "0000001",
38    "file_code": "0000004",
39    "file_name": "ファイルc"
40  },
41  {
42    "invoice_code": "0000001",
43    "file_code": "0000005",
44    "file_name": "ファイルd"
45  },
46  {
47    "invoice_code": "0000002",
48    "file_code": "0000009",
49    "file_name": "請求書Bファイル１"
50  },
51  {
52    "invoice_code": "0000002",
53    "file_code": "0000010",
54    "file_name": "請求書Bファイル２"
55  },
56  {
57    "invoice_code": "0000003",
58    "file_code": "0000011",
59    "file_name": "請求書Cファイル１"
60  },
61  {
62    "invoice_code": "0000003",
63    "file_code": "0000012",
64    "file_name": "請求書Cファイル２"
65  },
66  {
67    "invoice_code": "0000002",
68    "file_code": "0000013",
69    "file_name": "TLファイル１"
70  },
71  {
72    "invoice_code": "0000004",
73    "file_code": "0000014",
74    "file_name": "請求書00用ファイル"
75  }
76],
77}

invoiceは配列invoiceに、fileは配列fileに既に格納しています。

現在のfile

javascript
1file [
2  {
3    "invoice_code": "0000001",
4    "file_code": "0000001",
5    "file_name": "ファイル"
6  },
7  {
8    "invoice_code": "0000001",
9    "file_code": "0000002",
10    "file_name": "ファイルa"
11  },
12  {
13    "invoice_code": "0000001",
14    "file_code": "0000003",
15    "file_name": "ファイルb"
16  },
17  {
18    "invoice_code": "0000001",
19    "file_code": "0000004",
20    "file_name": "ファイルc"
21  },
22  {
23    "invoice_code": "0000001",
24    "file_code": "0000005",
25    "file_name": "ファイルd"
26  },
27  {
28    "invoice_code": "0000002",
29    "file_code": "0000009",
30    "file_name": "請求書Bファイル１"
31  },
32  {
33    "invoice_code": "0000002",
34    "file_code": "0000010",
35    "file_name": "請求書Bファイル２"
36  },
37  {
38    "invoice_code": "0000003",
39    "file_code": "0000011",
40    "file_name": "請求書Cファイル１"
41  },
42  {
43    "invoice_code": "0000003",
44    "file_code": "0000012",
45    "file_name": "請求書Cファイル２"
46  },
47  {
48    "invoice_code": "0000002",
49    "file_code": "0000013",
50    "file_name": "TLファイル１"
51  },
52  {
53    "invoice_code": "0000004",
54    "file_code": "0000014",
55    "file_name": "請求書00用ファイル"
56  }
57]

invoice_codeごとにまとめて下記のような形にしたい。

file {
  "0000001": [
  {
    value: "0000001",
    label: "ファイル"
  },
  {
    value: "0000002",
    label: "ファイルa"
  },
  {
    value: "0000003",
    label: "ファイルb"
  },
  {
    value: "0000004",
    label: "ファイルc"
  },
  {
    value: "0000005",
    label: "ファイルd"
  },
  ],
  "0000002": [
  {
    value: "0000009",
    label: "請求書Bファイル１"
  },
  {
    value: "0000010",
    label: "請求書Bファイル２"
  },
  {
    value: "0000013",
    label: "TLファイル１"
  },
  ],
  "0000003": [
  {
    value: "0000011",
    label: "請求書Cファイル１"
  },
  {
    value: "0000012",
    label: "請求書Cファイル２"
  },
  ],
  "0000004": [
  {
    value: "0000014",
    label: "請求書00用ファイル"
  }
  ],
]

書き方など、わかりにくかったらすみません。
どなたかわかる方、ご教示いただけますと幸いです。

行動規範の内容に同意します

回答2件

(都合により削除)

投稿2021/08/14 03:25

編集2021/10/08 21:37

退会済みユーザー

総合スコア0

happyylemon

2021/08/15 13:30

ありがとうございます。悩みながら、[こちら](https://teratail.com/questions/198747?sort=2#1450)の記事に行きつき、lodashのやり方も試してみたいと思っていたところに勿怪の幸いでした。ブランチ切って、試してみます！ありがとうございます。

行動規範の内容に同意します

ベストアンサー

まず存在するinvoiceのリストを作成(下記invoices)して、それをベースにレスポンスのfileからreduceでinvoice_codeがそれぞれのinvoices内の値に対応するオブジェクトを抜き出して、中身を整形して、新しいオブジェクトとして返しています。

動作デモ

JavaScript
1// API
2const response = {
3  invoice: [
4    {
5      invoice_code: "0000001",
6      invoice_name: "請求書A"
7    },
8    {
9      invoice_code: "0000002",
10      invoice_name: "請求書B"
11    },
12    {
13      invoice_code: "0000003",
14      invoice_name: "請求書C"
15    },
16    {
17      invoice_code: "0000004",
18      invoice_name: "請求書D"
19    }
20  ],
21  file: [
22    {
23      invoice_code: "0000001",
24      file_code: "0000001",
25      file_name: "ファイル"
26    },
27    {
28      invoice_code: "0000001",
29      file_code: "0000002",
30      file_name: "ファイルa"
31    },
32    {
33      invoice_code: "0000001",
34      file_code: "0000003",
35      file_name: "ファイルb"
36    },
37    {
38      invoice_code: "0000001",
39      file_code: "0000004",
40      file_name: "ファイルc"
41    },
42    {
43      invoice_code: "0000001",
44      file_code: "0000005",
45      file_name: "ファイルd"
46    },
47    {
48      invoice_code: "0000002",
49      file_code: "0000009",
50      file_name: "請求書Bファイル１"
51    },
52    {
53      invoice_code: "0000002",
54      file_code: "0000010",
55      file_name: "請求書Bファイル２"
56    },
57    {
58      invoice_code: "0000003",
59      file_code: "0000011",
60      file_name: "請求書Cファイル１"
61    },
62    {
63      invoice_code: "0000003",
64      file_code: "0000012",
65      file_name: "請求書Cファイル２"
66    },
67    {
68      invoice_code: "0000002",
69      file_code: "0000013",
70      file_name: "TLファイル１"
71    },
72    {
73      invoice_code: "0000004",
74      file_code: "0000014",
75      file_name: "請求書00用ファイル"
76    }
77  ]
78}
79
80const { invoice, file: preFile } = response
81// 存在するinvoiceのリスト
82const invoices = invoice.map(({ invoice_code }) => invoice_code)
83
84const file = invoices.reduce((data, currentInvoice) => {
85  const item = preFile.flatMap(({ invoice_code, file_code, file_name }) =>
86    // invoiceが対応しているアイテムのキー名を変えて新しいオブジェクトとして返す
87    currentInvoice === invoice_code ? { value: file_code, label: file_name } : []
88  )
89  return { ...data, [currentInvoice]: item }
90}, {})
91
92console.log(file)

※flatMapの部分はmapとfilterをそれぞれ使っても良いと思います。

JavaScript
1const item = preFile.flatMap(({ invoice_code, file_code, file_name }) =>
2  // invoiceが対応しているアイテムのキー名を変えて新しいオブジェクトとして返す
3  currentInvoice === invoice_code ? { value: file_code, label: file_name } : []
4)

は

JavaScript
1const item = preFile.filter(({ invoice_code }) => currentInvoice === invoice_code).map(({ file_code, file_name }) => ({ value: file_code, label: file_name }))