mapを使用してオブジェクトをid付きの配列に整形する

おはこんばんにちは。
オブジェクトと配列がまだまだ得意になれないしょうみゆです。

今回は下記のようなオブジェクトを、

{
  fruit: 'ぶどう',
  dishes: ['ハンバーグ', 'グラタン'],
}

下記のようなidとラベル付きの配列に変換します。

[
  {
    id: 'fruit',
    label: '好きな果物',
    data: 'ぶどう',
  },
  {
    id: 'dishes',
    label: '好きな料理',
    data: ['ハンバーグ', 'グラタン'],
  },
]

オブジェクトの値を引っ張ってくるのってどうやるんだっけっていつもこの状況に遭遇する度にググってて、ググり疲れたので記事にしようと思いました。

初心者丸出しですが、お付き合いくださいｗ

Contents

早速やる
独り言

早速やる

オブジェクトでこんなデータを用意しました。
私の好きな食べ物です（ﾄﾞｰﾝ）

const myfavoriteObj = {
  fruit: 'ぶどう',
  dishes: ['ハンバーグ', 'グラタン'],
}

これにラベルをつけて配列化したいと思います。

const myfavoriteObj = {
  fruit: 'ぶどう',
  dishes: ['ハンバーグ', 'グラタン'],
}

const labels = [
  { id: 'fruit', name: '好きな果物' },
  { id: 'dishes', name: '好きな料理' },
]

const myfavoriteArr = labels.map((label) => {
  return {
    id: label.id,
    label: label.name,
    data: myfavoriteObj[label.id],
  }
})

console.log(myfavoriteArr)

// 0: {id: "fruit", label: "好きな果物", data: "ぶどう"}
// 1: {id: "dishes", label: "好きな料理", data: Array(2)}

オブジェクトの配列【labels】を新たに定義して、idをmyfavoriteObjのキーと合わせておきます。

labelsをmapに渡してオブジェクト形式でreturnするのですが、その際にmyfavoriteObj[label.id]とすることでオブジェクトのキーに紐付いた値が指定できます。

これで下記のようなデータが生成されました。

[
  {
    id: 'fruit',
    label: '好きな果物',
    data: 'ぶどう',
  },
  {
    id: 'dishes',
    label: '好きな料理',
    data: ['ハンバーグ', 'グラタン'],
  },
]

独り言

実はオブジェクトも配列もまだまだ苦手で、こういう変換したくてググってもほしい記事がピンポイントに出てこなくて解決するのに時間がかかってたんですよね。

同じような方たくさんいると思うんですけど、みんななんていうキーワードでググるんですかね・・

使いどころ自体は結構あって、直近だとmicroCMSのオブジェクト形式のAPIとかを作るとこんな処理しました。
オブジェクトも配列も早く得意になりたいな😇