首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 08, 2018

如下所示：

<!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数据中的某一个属性来给数据分组的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

Firoly

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 #Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 #Javascript
angularJs提交文本框数据到后台的方法
Oct 08 #Javascript
详解webpack之图片引入-增强的file-loader：url-loader
Oct 08 #Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 #Javascript
webpack之引入图片的实现及问题
Oct 08 #Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 #Javascript
弱口令(1) ipv6(1) 内存(1) UV(1) 线程(1) 连接数(1) PV(1) 策略(1) 访问日志(2) 缓存(3)
You might like
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php购物车实现代码
2011/10/10 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
php生成rss类用法实例
2015/04/14 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
基于jQuery实现的百度导航li拖放排列效果，即时更新数据库
2012/07/31 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
Python实现快速多线程ping的方法
2015/07/15 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Django中modelform组件实例用法总结
2020/02/10 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
软件测试面试题
2014/01/05 面试题
建议书标准格式
2014/03/12 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
详解OpenCV获取高动态范围（HDR）成像
2022/04/29 Python