首页
所有分类
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 相关文章推荐
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
JS表格组件神器bootstrap table详解（基础版）
Dec 08 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
js实现数字滚动特效
Dec 16 Javascript
解决Nuxt使用axios跨域问题
Jul 06 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
SQL注入(2) 增删查改(1) 选择器(1) #{}(1) 代理(2) S-2000(1) 外键(1) IC-R9500(1) 克隆(1) 脏读(2)
You might like
一些星际专用术语解释
2020/03/04 星际争霸
PHP数据类型之布尔型的介绍
2013/04/28 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
php动态函数调用方法
2015/05/21 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
干货分享：让你分分钟学会javascript闭包
2015/12/25 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
VUE+node（express）实现前后端分离
2019/10/13 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
python中for in的用法详解
2020/04/17 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
德国网上超市：myTime.de
2019/08/26 全球购物
软环境建设心得体会
2014/09/09 职场文书
个人投资合作协议书
2014/10/12 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android