JavaScriptでJSON配列をグルーピングする方法(reduce)

JavaScript

2017.10.062022.08.24

JavaScriptでJSON配列をグルーピングする方法(reduce)
1. 関連

JavaScriptでJSON配列をグルーピングする方法(reduce)

JSON配列をグルーピングする方法です。JSON配列は以下とします。

const arr = [
  {
    名前: 'あじ',
    分類: '魚',
    価格: 200
  },
  {
    名前: 'さんま',
    分類: '魚',
    価格: 120
  },
  {
    名前: 'いわし',
    分類: '魚',
    価格: 150
  },
  {
    名前: '豚肉',
    分類: '肉',
    価格: 500
  },
  {
    名前: '鶏肉',
    分類: '肉',
    価格: 150
  },
  {
    名前: '鶏肉',
    分類: '肉',
    価格: 320
  }
]

分類ごとにまとめて価格は合計出したい、件数をカウントしたいとします。以下になるようにします。

result = [
  {
    分類: '肉',
    価格合計: 970,
    合計件数: 3
  },
  {
    分類: '魚',
    価格合計: 470,
    合計件数: 3
  }
]

配列のreduceを使用してグループ化します。

const arr = [ { 名前: 'あじ', 分類: '魚', 価格: 200 }, { 名前: 'さんま', 分類: '魚', 価格: 120 }, { 名前: 'いわし', 分類: '魚', 価格: 150 }, { 名前: '豚肉', 分類: '肉', 価格: 500 }, { 名前: '鶏肉', 分類: '肉', 価格: 150 }, { 名前: '鶏肉', 分類: '肉', 価格: 320 } ]

const group = arr.reduce((result,current)=>{
    const el = result.find(d=> d.分類 === current.分類)
    if(el) {
        el['合計件数'] ++
        el['価格合計'] += current['価格']
    } else {
        result.push({
          '分類':  current.分類,
          '価格合計': current.価格,
          '合計件数': 1
        })
    }
    return result
}, [])

console.log(group)