javascriptの連想配列の値を条件付きで抽出したい

Question

前提・実現したいこと

Javascriptの以下の連想配列から、style.typeの値が一致するtimeの値を配列にして
取得したいのですが、やり方がわからないので質問させて頂きました。

該当のソースコード

const group=[

{
stuff: {name: 'A'}
time: 60
style: {type: 'typeA'}},

{
stuff: {name: 'A'}
time: 120
style: {type: 'typeB'}},


{
stuff: {name: 'A'}
time: 83
style: {type: 'typeC'}},


{
stuff: {name: 'B'}
time: 257
style: {type: 'typeB'}},


{
stuff: {name: 'B'}
time: 120
style: {type: 'typeD'}},


{
stuff: {name: 'B'}
time: 66
style: {type: 'typeA'}}

]

試したこと

const groupBytime=group.map(x=>x.time);	

map関数を使うと[60, 120, 83, 257, 120, 66]という結果が得られましたが、
これをstyle.typeが'typeA'のtimeの配列[60,66]、'typeB'のtimeの配列[120,257]...といったように出力を分けたいです。似たような例を見つけられなかったので質問させて頂きました。

Comments

[yambejp]

const group={・・・}の部分はconst group=[・・・]にしないと成立しません

[asahiko123]

ご指摘ありがとうございます。
修正しました。

Answer 1

こういうときはlodashというのを使うといいと、このサイトで昔教わったので。

const groupBytime = _(group).groupBy('style.type').mapValues(ary => _.map(ary, 'time')).value();

???? CodePenで動かしてみた。

Comments

[asahiko123]

このライブラリ便利そうですね..
知らなかったので情報ありがとうございます。

[退会済みユーザー]

便利ですよ???? ???? https://lodash.com/

特に今回使った
groupBy
https://lodash.com/docs/4.17.15#groupBy
は今回のようなグループ化するときに便利です。
groupBy　の引数に 'style.type' というドット区切りの文字列を与えれば、各オブジェクトの対応する階層のプロパティの値をグループ化のキーにしてくれるというのもナカナカ気が利いてます。

Answer 2

const group=[
  {stuff:{name: 'A'},time:60 ,style:{type:'typeA'}},
  {stuff:{name: 'A'},time:120,style:{type:'typeB'}},
  {stuff:{name: 'A'},time:83 ,style:{type:'typeC'}},
  {stuff:{name: 'B'},time:257,style:{type:'typeB'}},
  {stuff:{name: 'B'},time:120,style:{type:'typeD'}},
  {stuff:{name: 'B'},time:66 ,style:{type:'typeA'}},
];
const types=[...new Set(group.map(x=>x.style.type))];
console.log(types);
const result=types.map(x=>group.filter(y=>y.style.type==x).map(x=>x.time));
console.log(result);

Comments

[asahiko123]

回答ありがとうございます。
こんなに短く記述できるとは、目から鱗でした。

Answer 3

groupが配列だとすると、reduce()を使って下のようなコードで { タイプ名: [time値, ...], タイプ名: [time値, ...], ...} というオブジェクトができます。

group.reduce((obj, current) => {
  (obj[currnt.style.type] ??= []).push(current.time);
  return obj;
}, {});

for of で回したほうがわかりやすいコードかもしれません。

Answer 4

もう少しいい方法があるかと思いますが、reduceで一度style.typeごとに分けて、その後でmapでtimeの値だけまとめて返したらいけると思います。

const result = group.reduce((acc,cur) => {
  const target = acc.findIndex((e) => e.type === cur.style.type);
  if(target >= 0) {
    acc[target] = { 
      type: acc[target].type, 
      values: [...acc[target].values, cur.time]
    }
  } else {
    acc.push({
      type: cur.style.type,
      values: [cur.time]
    })
  }
  return acc;
}, []).map((d) => d.values);

console.log(result);

出力

[ [ 60, 66 ], [ 120, 257 ], [ 83 ], [ 120 ] ]

Comments

[asahiko123]

reduceとfindを使ってできないか考えていたので、findIndexはなるほどと思いました。自分が考えていた形に一番近いというところでベストアンサーにさせていただきます。ありがとうございました。