首页
所有分类
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中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态（懒）加载模块和依赖
Nov 25 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 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
gevent(1) pytest(3) 正则表达式(3) Excel(4) Coroutine(1) 进销存(1) 信息校验(1) list(1) csv(4) greenlet(1)
You might like
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
Internet Explorer 11 浏览器介绍：别叫我IE
2014/09/28 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
用python实现的线程池实例代码
2018/01/06 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
python skimage 连通性区域检测方法
2018/06/21 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
Python3.7黑帽编程之病毒篇（基础篇）
2020/02/04 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
python如何设置静态变量
2020/09/07 Python
python实现感知机模型的示例
2020/09/30 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
Stuarts London美国/加拿大：世界领先的独立男装零售商之一
2019/03/18 全球购物
洗车工岗位职责
2014/03/15 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
委托证明范本
2014/11/25 职场文书
公司开业主持词
2015/07/02 职场文书
创业分两种人：那么哪些适合创业？,哪些适合不适合创业呢？
2019/08/23 职场文书
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android