首页
所有分类
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 相关文章推荐
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
用于节点操作的API，颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
手写实现JS中的new
Nov 07 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) Xception(1) Lifecycle(1) 内存泄露(1) 微信(2) ResNet50(1) 温控(1) 小喇叭(1) Spring(9) PostMapping(1)
You might like
PHP中，文件上传
2006/12/06 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
Bootstrap项目实战之首页内容介绍（全）
2016/04/25 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
vue.js打包之后可能会遇到的坑！
2018/06/03 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
js/jquery遍历对象和数组的方法分析【forEach，map与each方法】
2019/02/27 jQuery
JS document对象简单用法完整示例
2020/01/14 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
django ajax json的实例代码
2018/05/29 Python
Python画图高斯分布的示例
2019/07/10 Python
用Python写一个自动木马程序
2019/09/17 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
美国专注于健康商品的网站：eVitamins
2017/01/23 全球购物
DJI全球：DJI Global
2021/03/15 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
公务员职务工作的自我评价
2013/11/01 职场文书
应届生学校辅导员求职信
2013/11/07 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
签约仪式策划方案
2014/06/02 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
七年级作文之游记
2019/12/11 职场文书