Javascript 入れ子のある連想配列のコード整形をしたい

Question

前提

apiから受け取ったデータが連想配列になっており、配列データを整形したいと考えています。

実現したいこと

入れ子になっているデータを取り出してコード整形をしたい。

整形前のコード

const array = [
    { 'id': 'text1',
      'name': 'aaa',
      'age': '13',
      'sub':[
       { 'name': 'a1',
         'age': '16'
       },
      { 'name': 'a2',
        'age': '17'
      }, 
     ]
    },
    { 'id': 'text2',
      'name': 'bbb',
      'age': '14',
      'sub':[
       { 'name': 'b1',
         'age': '16'
       },
       { 'name': 'b2',
         'age': '17'
       }, 
      ]    
     },   
    ];

実現したい連想配列（整形後）

const newArray = [
    { 'id': 'text1',
      'name': 'aaa',
      'age': '13'
    },
    { 'name': 'a1',
      'age': '16'
    },
    { 'name': 'a2',
      'age': '17'
    }, 
    { 'id': 'text2',
      'name': 'bbb',
      'age': '14'
    },
    { 'name': 'b1',
      'age': '16'
    },
    { 'name': 'b2',
      'age': '17',
    }   
   ];

試したこと

mapメソッドとfilterメソッドを使用して整形するという所までは調べる事ができているのですが、入れ子の取り出し→新しい配列の形成という箇所がイメージできずに実装がかなっておりません。
実装イメージのヒント・模範コードを教えていただけたら幸いです。
よろしくお願いします。

Answer 1

flatMapを使います。

const newArray = array.flatMap(({ id, name, age, sub }) => [
  { id, name, age },
  ...sub,
]);

codepen 👉 https://codepen.io/su507/pen/rNKjrXJ?editors=0012

Comments

[intron0113]

ありがとうございます！flatMapでしたか。。大変参考になりました！！