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

JavaScript

2016.02.052022.08.22

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

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

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

[{'code':1,money:100,name:'卵'},
 {'code':1,money:150,name:'肉'},
 {'code':2,money:330,name:'かぼちゃ'},
 {'code':2,money:210,name:'玉ねぎ'}]

特定のキーcodeでdistinctし、その他のデータは配列としてグルーピングします。以下のようにします。

[
 {'code':1,datas: [{money:100,name:'卵'},{money:150,name:'肉'}]},
 {'code':2,datas: [{money:330,name:'かぼちゃ'},{money:210,name:'玉ねぎ'}]}
]

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

const arr = [{'code':1,money:100,name:'卵'}, {'code':1,money:150,name:'肉'}, {'code':2,money:330,name:'かぼちゃ'}, {'code':2,money:210,name:'玉ねぎ'}]

const group = arr.reduce((result,current)=>{
    const el = result.find(d=> d.code === current.code)
    if(el) {
        if(el.code ===current.code) {
            el.datas.push({
                'money': current.money,
                'name': current.name
            })
        }
    } else {
        result.push({
          'code':  current.code,
          'datas': [{'money': current.money,
          'name': current.name}]
        })
    }
    return result
},[])

console.log(JSON.stringify(group))

実行すると以下のように出力されます。

[
    {
        "code": 1,
        "datas": [
            {
                "money": 100,
                "name": "卵"
            },
            {
                "money": 150,
                "name": "肉"
            }
        ]
    },
    {
        "code": 2,
        "datas": [
            {
                "money": 330,
                "name": "かぼちゃ"
            },
            {
                "money": 210,
                "name": "玉ねぎ"
            }
        ]
    }
]