脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → js根据json数据中的某一个属性来给数据分组

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

 更新时间：2018年10月08日 15:30:04   作者：Firoly  
今天小编就为大家分享一篇js根据json数据中的某一个属性来给数据分组的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span id ="span" style="width: 50px;height: 200px;"></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数据中的某一个属性来给数据分组的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jQuery实现获取元素索引值index的方法

    jQuery实现获取元素索引值index的方法

    这篇文章主要介绍了jQuery实现获取元素索引值index的方法,涉及jQuery针对页面元素的遍历,index索引操作及属性操作相关技巧,需要的朋友可以参考下
    2016-09-09
  • 文本有关的样式和jQuery求对象的高宽问题分别说明

    文本有关的样式和jQuery求对象的高宽问题分别说明

    有关文处理本有关的问题WEB开发经常会用到，这里结合使用情况总结一下，同时还有jQuery求对象的高度问题，下面为大家本别讲解下
    2013-08-08
  • 判断一个对象是否为jquery对象的方法

    判断一个对象是否为jquery对象的方法

    在用jquery的each做循环遍历的时候常常会使用到this，要使用jquery的方法 前提此对象必须是jquery对象，下面为大家介绍下jquery对象的判断方法
    2014-03-03
  • 15个常用的jquery代码片段

    15个常用的jquery代码片段

    这篇文章主要介绍了15个常用的jquery代码片段，对大家学习jquery程序设计有所帮助,需要的朋友可以参考下
    2015-12-12
  • jquery 批量上传图片实现代码

    jquery 批量上传图片实现代码

    在网上一直找不到jquery上传图片的例子,今天由于工作需要,在网上找了很长时间,找到了一个不太完整的例子,自已又对其进行了修改,现在已经可以使用,但只限于IE,火狐下不能使用,因为火狐下得不到本地上传的图片路径,希望能对新手有所帮助.
    2010-01-01
  • jquery实现下拉框功能效果【实例代码】

    jquery实现下拉框功能效果【实例代码】

    下面小编就为大家带来一篇jquery实现下拉框功能效果【实例代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
    2016-05-05
  • 详解JavaScript中jQuery和Ajax以及JSONP的联合使用

    详解JavaScript中jQuery和Ajax以及JSONP的联合使用

    这篇文章主要介绍了详解JavaScript中jQuery和Ajax以及JSONP的联合使用,jQuery库和Ajax异步结构以及JSON数据传输也是JS日常编程中最常用到的东西,需要的朋友可以参考下
    2015-08-08
  • jquery实现鼠标悬浮弹出气泡提示框

    jquery实现鼠标悬浮弹出气泡提示框

    这篇文章主要为大家详细介绍了jquery实现鼠标悬浮弹出气泡提示框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • jquery tools 系列 scrollable学习

    jquery tools 系列 scrollable学习

    今天继续jquery tools六大功能之第三功能 scrollable的学习。一如既往，首先给出操作的html代码 此html代码修改自jquery tools官方网站demo代码
    2009-09-09
  • jQuery简单自定义图片轮播插件及用法示例

    jQuery简单自定义图片轮播插件及用法示例

    这篇文章主要介绍了jQuery简单自定义图片轮播插件及用法,结合实例形式分析了jQuery基于时间函数动态修改页面元素属性实现图片轮播功能的相关操作技巧,需要的朋友可以参考下
    2016-11-11

最新评论