首页
所有分类
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学习笔记二 之 变量
Dec 15 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
3种js实现string的substring方法
Nov 09 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 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
新西兰购物网站(42) 斯洛伐克购物网站(7) 智利购物网站(5) 奥地利购物网站(28) 土耳其购物网站(10) 阿联酋购物网站(26) 波兰购物网站(52) 卡塔尔购物网站(3) 沙特阿拉伯购物网站(9) 捷克购物网站(26)
You might like
给多个地址发邮件的类
2006/10/09 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
jQuery表单选择器用法详解
2019/08/22 jQuery
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[02:22:36]《加油！DOTA》总决赛
2014/09/19 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python中property和setter装饰器用法
2019/12/19 Python
python实现批量修改文件名
2020/03/23 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Python如何实现FTP功能
2020/05/28 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
寻找完美的房车租赁：RVShare
2019/02/23 全球购物
Shop Apotheke瑞士：您的健康与美容网上商店
2019/10/09 全球购物
澳大利亚在线批发商：Simply Wholesale
2021/02/24 全球购物
自我评价是什么
2014/01/04 职场文书
出纳员岗位责任制
2014/02/11 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
单位未婚证明范本
2014/11/25 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
联村联户简报
2015/07/21 职场文书