多重配列からkeyを指定してObjectに変換して配列にしたい

やりたいこと。

const sampleAnimals = [
  {
    id: 0,
    animal_id: 0,
    animal_on: '2021-08-01',
    animals: [
      {
        id: 1,
        name: '哺乳類',
        count: 4,
        option_animals: [
          {
            id: 1,
            name: 'くじら',
            count: 3,
          },
        ],
      },
      {
        id: 1,
        name: '哺乳類',
        count: 4,
        option_animals: [
          {
            id: 2,
            name: 'いるか',
            count: 3,
          },
        ],
      },
    ],
  },
  {
    id: 0,
    company_id: 0,
    animal_on: '2021-08-02',
    animals: [
      {
        id: 2,
        name: '鳥類',
        count: 5,
        option_animals: [
          {
            id: 3,
            name: '烏',
            count: 4,
          },
          {
            id: 4,
            name: '白鳥',
            count: 3,
          },
        ],
      },
      {
        id: 1,
        name: '哺乳類',
        count: 5,
        option_animals: [
          {
            id: 1,
            name: 'くじら',
            count: 4,
          },
          {
            id: 2,
            name: 'いるか',
            count: 5,
          },
        ],
      },
    ],
  },
];

上記を下に変換したい...

const sampleAnimals　 = [
  {
    "哺乳類": {
      '2021-08-01': {
        id: 1,
        name: '哺乳類',
        count: 5,
        option_animals: [
          {
            id: １,
            name: 'くじら',
            count: 4,
          },
        ],
      },
      '2021-08-02': {
        id: 1,
        name: '哺乳類',
        count: 5,
        option_animals: [
          {
            id: 1,
            name: 'くじら',
            count: 4,
          },
          {
            id: 2,
            name: 'いるか',
            count: 4,
          },
        ],
      },
    },
  },
  "鳥類" : {
    '2021-08-01' : {
　　　　　//省略
    }  
  }
];

経緯

動物	8/1	8/2	total
哺乳類	哺乳類のくじらといるかを足したtotal	哺乳類のくじらといるかを足したtotal	左の全てのtotal
くじら	日付ごとの数	日付ごとの数	左の全てのtotal
いるか	日付ごとの数	日付ごとの数	左の全てのtotal
鳥類	烏と白鳥のtotal	烏と白鳥のtotal	左の全てのtotal
烏	日付ごとの数	日付ごとの数	左の全てのtotal
白鳥	日付ごとの数	日付ごとの数	左の全てのtotal

※APIから全ての日付のデータは来ない（0の日はデータがこない）のでフロントで指定月のDateのArrayを作成している
※日付は1日から月末まで表示する　データのない場合は空欄
※くじらといるか　または　烏　と　白鳥　のみ題材としてますが　もっとAPIからは来る想定です　（**類も）

変換方法またはAPIからのデータの内容からテーブルの作成がうまくできない為、どなたかアドバイスいただきたいです。

変換につきましてはもっと良い形などありましたら添えてご教示いただけたらと????‍♂️

yambejp

2021/09/03 01:55 編集

sampleAnimalsはconstで指定してありますので、構造変化には向いていないと思います。別の変数にウケてはだめですか？ idとcountはどの部分がどう引き継がれるか説明が必要です

Lhankor_Mhy

2021/09/03 01:52

後者は文法上おかしいです。かっこの対応を見直してみてください。

Lhankor_Mhy

2021/09/03 02:13 編集

'2021-08-01': { id: 1,　←この1はどうやって決めているのですか？ name: '哺乳類', count: 5,　←この5はどうやって決めているのですか？

Lhankor_Mhy

2021/09/03 02:53

name: 'くじら', count: 4,　←この4はどうやって決めているのですか？ }, { id: 2, name: 'いるか', count: 4,　←この4はどうやって決めているのですか？

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

回答2件

不明なプロパティは適当に代入していますが、わかりやすく書くとこんな感じでは。

js
1  Object.entries([
2    {
3      id: 0,
4      animal_id: 0,
5      animal_on: '2021-08-01',
6      animals: [
7        {
8          id: 1,
9          name: '哺乳類',
10          count: 4,
11          option_animals: [
12            {
13              id: 1,
14              name: 'くじら',
15              count: 3,
16            },
17          ],
18        },
19        {
20          id: 1,
21          name: '哺乳類',
22          count: 4,
23          option_animals: [
24            {
25              id: 2,
26              name: 'いるか',
27              count: 3,
28            },
29          ],
30        },
31      ],
32    },
33    {
34      id: 0,
35      company_id: 0,
36      animal_on: '2021-08-02',
37      animals: [
38        {
39          id: 2,
40          name: '鳥類',
41          count: 5,
42          option_animals: [
43            {
44              id: 3,
45              name: '烏',
46              count: 4,
47            },
48            {
49              id: 4,
50              name: '白鳥',
51              count: 3,
52            },
53          ],
54        },
55        {
56          id: 1,
57          name: '哺乳類',
58          count: 5,
59          option_animals: [
60            {
61              id: 1,
62              name: 'くじら',
63              count: 4,
64            },
65            {
66              id: 2,
67              name: 'いるか',
68              count: 5,
69            },
70          ],
71        },
72      ],
73    },
74  ].reduce(
75    (x, { animal_on, animals }) => {
76      animals.reduce(
77        (x, animal) => {
78          x[animal.name] ??= {};
79          x[animal.name][animal_on] ??= {
80            id:animal.id,
81            name:animal.name,
82            count: 5,
83            option_animals:[],
84          };
85          const option_animals = animal.option_animals.slice().map(x=>{
86            x.count = 4;
87            return x;
88          });
89          x[animal.name][animal_on].option_animals = [...x[animal.name][animal_on].option_animals, ...option_animals];
90          return x;
91        },
92        x
93      );
94      return x;
95    },
96    {}
97  )).map(([k,v])=>({[k]:v}))

結果：

json
1[
2  {
3    "哺乳類": {
4      "2021-08-01": {
5        "id": 1,
6        "name": "哺乳類",
7        "count": 5,
8        "option_animals": [
9          {
10            "id": 1,
11            "name": "くじら",
12            "count": 4
13          },
14          {
15            "id": 2,
16            "name": "いるか",
17            "count": 4
18          }
19        ]
20      },
21      "2021-08-02": {
22        "id": 1,
23        "name": "哺乳類",
24        "count": 5,
25        "option_animals": [
26          {
27            "id": 1,
28            "name": "くじら",
29            "count": 4
30          },
31          {
32            "id": 2,
33            "name": "いるか",
34            "count": 4
35          }
36        ]
37      }
38    }
39  },
40  {
41    "鳥類": {
42      "2021-08-02": {
43        "id": 2,
44        "name": "鳥類",
45        "count": 5,
46        "option_animals": [
47          {
48            "id": 3,
49            "name": "烏",
50            "count": 4
51          },
52          {
53            "id": 4,
54            "name": "白鳥",
55            "count": 4
56          }
57        ]
58      }
59    }
60  }
61]

投稿2021/09/03 03:11

Lhankor_Mhy

総合スコア36163

わけのわからないところは飛ばして・・・
まずはなるべく並列なデータに受け直します（temp）
そこからカテゴリごとに絞り込んでデータをいれなおします

javascript
1const sampleAnimals = [
2・・・
3];
4const result={};
5const temp=[];
6sampleAnimals.forEach(x=>{
7  x.animals.forEach(y=>{
8    y.option_animals.forEach(z=>{
9      z.cate=y.name;
10      z.date=x.animal_on;
11      temp.push(z);
12    });
13  });
14});
15[...new Set(temp.map(x=>x.cate).flat())].forEach(x=>{
16  result[x]={};
17  [...new Set(temp.filter(y=>y.cate==x).map(y=>y.date))].forEach(y=>{
18    result[x][y]={};
19    result[x][y]["name"]=x;
20    result[x][y]["option_animals"]=temp.filter(z=>z.cate==x && z.date==y);
21  });
22});
23console.log(result);