JavaScript 配列

Question

JavaScript の質問です。
[{Id:a,name:taro},
{Id:b,name:hanako},
{Id:a,name:pochi}]
というデータを
{a:[taro,pochi],b:[hanako]}
と配列を成形したい場合の方法を教えていただきたいです。
for文を使う方法で出来る
と思うのですが、うまくいかなくて困ってます。

Comments

[azuapricot]

うまくいかなくて　×

実際にやってみてどういうコードになったのかを提示しましょう

Answer 1

こんにちは

この回答では３つコードを挙げます。以下、所与の配列をaryとし、得たいオブジェクトを resultとします。

1. for文を使う

ご質問に

for文を使う方法で出来る
と思うのですが、

とあったので、まず for文を使ったコード例を挙げます。

const ary = 
  [
    { Id: 'a', name: 'taro' },
    { Id: 'b', name: 'hanako' },
    { Id: 'a', name: 'pochi' },
    { Id: 'c', name: 'jiro' },
    { Id: 'b', name: 'saburo' },
    { Id: 'c', name: 'tama' }
  ]

const result = {}

for (let e of ary) {
  if (!result[e.Id]) result[e.Id] = []
  result[e.Id].push(e.name)
}

console.log(result)

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/jOOOjVp?editors=0012

以下、for文を使わない別解を２つ挙げます。

2. reduce を使う

reduce を使うと、以下のように書けます。

const result = ary.reduce((obj, e) => ({ 
  ...obj, [e.Id]: [...(obj[e.Id] || []), e.name] 
}), {})

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/wvvvbXg?editors=0012

3. lodash を使う

配列やオブジェクトの操作で便利なライブラリ lodash が提供する、以下のメソッド

• _.groupBy
• _.mapValues
• _.map

を使うと、以下のように書けます。

const result = _.mapValues(_.groupBy(ary, 'Id'),  subAry => _.map(subAry, 'name'))

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/WNNbjLO?editors=0012

Answer 2

var a=[
  {Id:"a",name:"taro"},
  {Id:"b",name:"hanako"},
  {Id:"a",name:"pochi"},
  ];
var b={};
a.forEach(x=>{
  if(typeof b[x.Id]=="undefined"){
    b[x.Id]=[];
  }
  b[x.Id].push(x.name);
});
console.log(b);