温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js如何根据json数据中的某一个属性来给数据分组

发布时间:2021-08-13 09:31:06 来源:亿速云 阅读:169 作者:小新 栏目:web开发

这篇文章主要介绍js如何根据json数据中的某一个属性来给数据分组,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

如下所示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span id ="span" ></span>
	</body>
	<script>
	var arr = [{"Group":1,"Groupheader":"质量管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
{"Group":1,"Groupheader":"","Leftimg":"","Left":"","Min":"质量巡检","Right":"","Rightimg":""},
{"Group":2,"Groupheader":"设备管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备专业点检","Right":"","Rightimg":""},
{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备日检","Right":"","Rightimg":""},
{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备周检","Right":"","Rightimg":""},
{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备月检","Right":"","Rightimg":""}];
 
var map = {},
 dest = [];
for(var i = 0; i < arr.length; i++){
 var ai = arr[i];
 if(!map[ai.Group]){
  dest.push({
   Group: ai.Group,
  
   data: [ai]
  });
  map[ai.Group] = ai;
 }else{
  for(var j = 0; j < dest.length; j++){
   var dj = dest[j];
   if(dj.Group == ai.Group){
    dj.data.push(ai);
    break;
   }
  }
 }
}
console.log(JSON.stringify(dest));
	var sapn = document.getElementById("span");
	span.innerHTML = JSON.stringify(dest);
	</script>
</html>

原始数据:

[{"Group":1,"Groupheader":"质量管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
{"Group":1,"Groupheader":"","Leftimg":"","Left":"","Min":"质量巡检","Right":"","Rightimg":""},
{"Group":2,"Groupheader":"设备管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备专业点检","Right":"","Rightimg":""},
{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备日检","Right":"","Rightimg":""},
{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备周检","Right":"","Rightimg":""},
{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备月检","Right":"","Rightimg":""}];

处理后的数据:

[
 {
  "Group": 1,
  "data": [
   {
    "Group": 1,
    "Groupheader": "质量管理",
    "Leftimg": "",
    "Left": "",
    "Min": "",
    "Right": "",
    "Rightimg": ""
   },
   {
    "Group": 1,
    "Groupheader": "",
    "Leftimg": "",
    "Left": "",
    "Min": "质量巡检",
    "Right": "",
    "Rightimg": ""
   }
  ]
 },
 {
  "Group": 2,
  "data": [
   {
    "Group": 2,
    "Groupheader": "设备管理",
    "Leftimg": "",
    "Left": "",
    "Min": "",
    "Right": "",
    "Rightimg": ""
   },
   {
    "Group": 2,
    "Groupheader": "",
    "Leftimg": "",
    "Left": "",
    "Min": "设备专业点检",
    "Right": "",
    "Rightimg": ""
   },
   {
    "Group": 2,
    "Groupheader": "",
    "Leftimg": "",
    "Left": "",
    "Min": "设备日检",
    "Right": "",
    "Rightimg": ""
   },
   {
    "Group": 2,
    "Groupheader": "",
    "Leftimg": "",
    "Left": "",
    "Min": "设备周检",
    "Right": "",
    "Rightimg": ""
   },
   {
    "Group": 2,
    "Groupheader": "",
    "Leftimg": "",
    "Left": "",
    "Min": "设备月检",
    "Right": "",
    "Rightimg": ""
   }
  ]
 }
]

以上是“js如何根据json数据中的某一个属性来给数据分组”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI