Javascript對資料進行分組及根據分組統計
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS分組及計數</title>
</head>
<body>
<script>
var data = [
{
date: "5-23",
info: "你吃飯了嗎!",
},
{
date: "5-23",
info: "我吃了!你呢?",
},
{
date: "5-23",
info: "我也吃了",
},
{
date: "5-24",
info: "早上好啊",
},
{
date: "5-24",
info: "你也早",
},
]; // 總計5個香蕉
var dataContainer = {}; //存分組的
data.map((item) => {
//對資料進行周遊
//dataContainer['5-23'] (給dataContainer對象添加了一個'5-23'鍵名) = dataContainer['5-23'] (第一次循環dataContainer['5-23'] 沒有值,是以為undefined) || []
dataContainer[item.date] = dataContainer[item.date] || [];
dataContainer[item.date].push(item);
});
console.log(dataContainer);
/*
* {
5-23:[
{
date: "5-23",
info: "你吃飯了嗎!",
},
]
5-24:[
{
date: "5-24",
info: "早上好啊",
},
]
}
*/
var total = []; //最後統計結束的資料
var dataName = Object.keys(dataContainer); // 擷取分組的鍵名:["5-23", "5-24"] Object.keys:可以将對象的鍵名存到一個數組中去
dataName.map((nameItem) => {
//循環鍵名
let count = 0; //每個分組的count 都會在外層循環清0
dataContainer[nameItem].map((item) => {
count++; // 周遊每個種類,每循環一次,該分組的count 就 +1
});
//内層循環結束後,在外層最後,将你需要的資料,存到一個對象中去即可
total.push({ name: nameItem, total: count });
});
console.log(total);
/*
[
{
"name": "5-23", //種類
"total": 3 //每個種類的資料總條數
},
{
"name": "5-24", //種類
"total": 2 //每個種類的資料總條數
}
]
*/
</script>
</body>
</html>
js基礎惡補ing