您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
lodash神奇妙用，實現前端數據分組按字段分組 js分組
发布时间：2022-01-19 22:24:55编辑：雪饮阅读（）
有時候像是一些不太重要的數據，比如只是展示信息而已，若能讓前端自己處理分組，而後端不進行mysql分組，則後端響應是極快的。
那麽前端分組可以使用一個js庫叫做lodash
具體實現如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>恭喜，站点创建成功！</title>
<script src="lodash.min.js"></script>
<script>
var list={
"code": 200,
"data": {
"total": "24",
"per_page": 10,
"current_page": 1,
"last_page": 3,
"data": [
{
"ID": "1",
"StationNo": "0001",
"POS_NO": null,
"NozzleSN": "2",
"NozzleNO": "1",
"MCHNO": null,
"OilSort": "92# 汽油",
"Tank": "2",
"Active": "1",
"Manual": "0",
"COM": "3",
"NZVersion": null,
"AURL": "http://yanshi.i9tech.cn/f/app/lpr/test",
"BURL": null,
"BanBLK": null,
"OilSort_Pure": "92"
},
{
"ID": "2",
"StationNo": "0001",
"POS_NO": null,
"NozzleSN": "1",
"NozzleNO": "2",
"MCHNO": null,
"OilSort": "92# 汽油",
"Tank": "2",
"Active": "1",
"Manual": "0",
"COM": "3",
"NZVersion": null,
"AURL": "http://yanshi.i9tech.cn/f/app/lpr/test",
"BURL": null,
"BanBLK": null,
"OilSort_Pure": "92"
},
{
"ID": "3",
"StationNo": "0001",
"POS_NO": null,
"NozzleSN": "1",
"NozzleNO": "3",
"MCHNO": null,
"OilSort": "95# 汽油",
"Tank": "3",
"Active": "1",
"Manual": "0",
"COM": "4",
"NZVersion": null,
"AURL": null,
"BURL": null,
"BanBLK": null,
"OilSort_Pure": "95"
},
{
"ID": "4",
"StationNo": "0001",
"POS_NO": null,
"NozzleSN": "2",
"NozzleNO": "4",
"MCHNO": null,
"OilSort": "95# 汽油",
"Tank": "3",
"Active": "1",
"Manual": "0",
"COM": "4",
"NZVersion": null,
"AURL": null,
"BURL": null,
"BanBLK": null,
"OilSort_Pure": "95"
},
{
"ID": "5",
"StationNo": "0001",
"POS_NO": null,
"NozzleSN": "2",
"NozzleNO": "5",
"MCHNO": null,
"OilSort": "0# 柴油",
"Tank": "1",
"Active": "1",
"Manual": "0",
"COM": "5",
"NZVersion": null,
"AURL": null,
"BURL": null,
"BanBLK": null,
"OilSort_Pure": "0"
},
{
"ID": "6",
"StationNo": "0001",
"POS_NO": null,
"NozzleSN": "1",
"NozzleNO": "6",
"MCHNO": null,
"OilSort": "0# 柴油",
"Tank": "1",
"Active": "1",
"Manual": "0",
"COM": "5",
"NZVersion": null,
"AURL": null,
"BURL": null,
"BanBLK": null,
"OilSort_Pure": "0"
},
{
"ID": "7",
"StationNo": "0001",
"POS_NO": null,
"NozzleSN": "1",
"NozzleNO": "7",
"MCHNO": null,
"OilSort": "92# 汽油",
"Tank": "2",
"Active": "1",
"Manual": "0",
"COM": "6",
"NZVersion": null,
"AURL": null,
"BURL": null,
"BanBLK": null,
"OilSort_Pure": "92"
},
{
"ID": "8",
"StationNo": "0001",
"POS_NO": null,
"NozzleSN": "2",
"NozzleNO": "8",
"MCHNO": null,
"OilSort": "92# 汽油",
"Tank": "2",
"Active": "1",
"Manual": "0",
"COM": "6",
"NZVersion": null,
"AURL": null,
"BURL": null,
"BanBLK": null,
"OilSort_Pure": "92"
},
{
"ID": "9",
"StationNo": "0001",
"POS_NO": null,
"NozzleSN": "2",
"NozzleNO": "9",
"MCHNO": null,
"OilSort": "95# 汽油",
"Tank": "3",
"Active": "1",
"Manual": "0",
"COM": "7",
"NZVersion": null,
"AURL": null,
"BURL": null,
"BanBLK": null,
"OilSort_Pure": "95"
},
{
"ID": "10",
"StationNo": "0001",
"POS_NO": null,
"NozzleSN": "1",
"NozzleNO": "10",
"MCHNO": null,
"OilSort": "95# 汽油",
"Tank": "3",
"Active": "1",
"Manual": "0",
"COM": "7",
"NZVersion": null,
"AURL": null,
"BURL": null,
"BanBLK": null,
"OilSort_Pure": "95"
}
]
},
"msg": "success"
};
var newList=_(list.data.data).groupBy(item=>item.OilSort).value();
console.log("newList",newList);
</script>
</head>
<body>
</body>
</html>
分組效果也是不錯的
关键字词：lodash,前端分組,js分組
相关文章
-
无相关信息