
Javascriptの連想配列データは、単純な配列のように処理する時にちょっとした書き方の技があるので、その方法をサンプルを使ってご紹介。
データベースの取得後のデータなどの処理に便利に使えます。
サンプルデータ
const datas = [
{
id : 1,
name : "apple",
count: 100
},
{
id : 2,
name : "banana",
count : 50
},
{
id : 3,
name : "orange",
count : 10
},
{
id : 4,
name : "apple",
count : 10
},
{
id : 5,
name : "banana",
count : 0
}
]
name値の値一覧をユニークで取得する
Array.from(new Set(datas.map(e => e.name)))
結果
['apple', 'banana', 'orange']
ユニーク化して、値が空を除外する
※nameが空を除外
Array.from(new Set(datas.map(e => e.name))).filter(e => e.name)
name値でソートする
datas.sort((a,b) => {
if(a.name < b.name){return -1}
if(a.name > b.name){return +1}
})
結果
[
{
"id": 1,
"name": "apple",
"count": 100
},
{
"id": 4,
"name": "apple",
"count": 10
},
{
"id": 2,
"name": "banana",
"count": 50
},
{
"id": 5,
"name": "banana",
"count": 0
},
{
"id": 3,
"name": "orange",
"count": 10
}
]
名前で重複しているものを統合してcountの値を合計する
Object.values(datas.reduce((res, obj) => {
if(res[obj.name]){
res[obj.name].count += obj.count
}
else{
res[obj.name] = obj
}
return res
}, {}))
結果
[
{
"id": 1,
"name": "apple",
"count": 110
},
{
"id": 2,
"name": "banana",
"count": 50
},
{
"id": 3,
"name": "orange",
"count": 10
}
]