連想配列からカテゴリごとの小計を求める方法

Question

javascriptで連想配列からcategoryごとの小計を計算して下記期待値のような形で返却したいのですが、知見がなく手詰まりの状態です
for文を使用しながら試行錯誤しているのですがいまだにできていません
なので実現方法などを助言いただければと思います
宜しくお願い致します

◎使用するデータ

var items = [
    {
        category: A,
        price: 100
    },
    {
        category: B,
        price: 200
    },
    {
        category: C,
        price: 300
    },
    {
        category: B,
        price: 400
    },
    {
        category: C,
        price: 500
    },
]

◎期待する返却地

var result= [
    {
        category: A,
        subtotal: 100
    },
    {
        category: B,
        subtotal: 600
    },
    {
        category: C,
        subtotal: 800
    }
]

Comments

[m.ts10806]

まずは自身が試したコードをご提示ください。
質問ではなく作業依頼になっています。

[Biginner_A]

申し訳有りません
次回質問することがあれば自分のコードを貼るようにしていきます。ご指摘ありがとうございます

Answer 1

こんにちは

2つのコード例を挙げます。1つ目は reduce と Map を使ったコードで、2つ目はlodashを使ったコードです。

1. reduce と Map を使ったコード

基本的な流れは以下です。

• カテゴリーの文字列をキーとし、そのカテゴリーごとの合計額を値とするMapを、reduce を使って作る。
• 上記で得られたMapをスプレッド構文によって配列にし、
• 最後に、map によって、配列の要素を希望する形に整形します。

var result = [...
  items.reduce(
    (m, item) => m.set(item.category, (m.get(item.category) || 0) + item.price)
    ,new Map()
  )].map(([category, subtotal]) => ({category, subtotal}))

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/JjdoGgW

2. lodash を使ったコード

配列やオブジェクトの操作で便利なライブラリlodash の、以下のメソッドを使います。

• 配列の要素を何らかの基準によってグルーピングした結果のオブジェクトを返す： _.groupBy
• 与えられたオブジェクトの各プロパティに何らかの処理をしたオブジェクトを返す： _.mapValues

上記によって得られたオブジェクトを、Object.entries()によって配列にし、先の1.のコードと同様に、map によって配列要素を望ましい形に整形します。

var totalize = items => items.reduce((sum, item) => sum + item.price, 0)
    
var totals = _.mapValues(_.groupBy(items, "category"), totalize)
                
var result = Object.entries(totals).map(([category, subtotal]) => ({category, subtotal}))

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/OJVPMEZ

補足

上記のコード1.および 2. ともに、結果として得られる配列の要素の順番は、"A"、 "B"、 "C" と、カテゴリーのアルファベット順になっているかと思いますが、元のデータの配列 items に含まれる要素の順番がどのようなものであっても、result としては、カテゴリーの文字列の昇順にソートされた結果を得たいのであれば、さらに sort を使って明示的にソートする必要があります。

以上、参考になれば幸いです。

Answer 2

なるほど
この最終結果を作るのは中々難しいでしょうね。
JSの中級者くらいにならないと歯が立たない難問だと思います。

理由としては一撃でやろうとすると、
配列の何処にAの情報あるんだっけ？と毎回探す必要があります。
一度オブジェクトを噛ませるのが良いやり方です。

ただし、オブジェクトは配列で気軽に回せない……
そこでキー情報を配列として受け取るObject.keysを利用します。

ES2015というJavaScriptの新しい仕様で
for...ofという強力な構文が加わったのでこれをガンガン活用していきますよ。

var items = [
  {category: "A", price: 100},
  {category: "B", price: 200},
  {category: "C", price: 300},
  {category: "B", price: 400},
  {category: "C", price: 500},
];

// 中間resultは配列ではなく、オブジェクトにするのがコツ
var tmpResult = {};
for (const item of items) {
  if (!tmpResult[item.category]) tmpResult[item.category] = 0;
  tmpResult[item.category] += item.price;
}

// 中間resultを確認
console.log(tmpResult);
// {A: 100, B: 600, C: 800}

// 中間resultから完成の結果を作る
var result = [];
for (const category of Object.keys(tmpResult)) {
  result.push({
    category: category,
    price: tmpResult[category],
  });  
}

// resultを確認
console.log(result);
// [
//   {category: "A", price: 100},
//   {category: "B", price: 600},
//   {category: "C", price: 800},
// ]

---

【おまけ】 なんとか一撃でやっつける

reduceやfor文1個で出来ないことも無いですが……という感じですね。
いくらかは分けた方が理解しやすいと思います。

var items = [
  {category: "A", price: 100},
  {category: "B", price: 200},
  {category: "C", price: 300},
  {category: "B", price: 400},
  {category: "C", price: 500},
];

var result = items.reduce((arr, {category, price}) => {
  const target = arr.find(it => it.category === category);
  if (target) {
    target.price += price;
  } else {
    arr.push({category, price});
  }
  return arr;
}, []);
// [
//   {category: "A", price: 100},
//   {category: "B", price: 600},
//   {category: "C", price: 800},
// ]

Answer 3

IEいらないなら次のように書けます。

const items = [
    {
        category: 'A',
        price: 100
    },
    {
        category: 'B',
        price: 200
    },
    {
        category: 'C',
        price: 300
    },
    {
        category: 'B',
        price: 400
    },
    {
        category: 'C',
        price: 500
    },
];

console.log(Object.entries(items.reduce((acc, item) => Object.assign(acc, {[item.category]: item.price + (acc[item.category] || 0)}),{})).map(item => ({category: item[0], price: item[1]})));

↓

[
  { category: 'A', price: 100 },
  { category: 'B', price: 600 },
  { category: 'C', price: 800 }
]

やってることはmiyabi-sunさんの最初の説明と同様です。

Answer 4

そもそも例の連想配列のキーが文字列指定になってない時点でエラーになるんですが。
reduceを使えば簡単にまとめられます。

var items = [
    {
        category: 'A',
        price: 100
    },
    {
        category: 'B',
        price: 200
    },
    {
        category: 'C',
        price: 300
    },
    {
        category: 'B',
        price: 400
    },
    {
        category: 'C',
        price: 500
    },
];

var group = items.reduce(function (result, current) {
    // category項目が同一か判定する関数
    var element = result.find(function (p) {
      return p.category === current.category
    });
    // 同一であれば
    if (element) {
      // priceを加算
      element.price += current.price; // sum
    } else {
      // 結果配列に新規追加
      result.push({
        category: current.category,
        price: current.price
      });
    }
    return result;
  }, []);

console.log(JSON.stringify(group,null,'\t'));

Comments

[m.ts10806]

>連想配列のキーが
「値が」だと思います。

[m.ts10806]

ただ、まだ、もしかしたらあそこは変数である可能性がなくはないので・・