首页
所有分类
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 相关文章推荐
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
回顾Javascript React基础
Jun 15 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
小程序实现筛子抽奖
May 26 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) 内存(1) 连接数(1) 锁(1) 访问日志(2) 策略(1) 缓存(3) 弱口令(1) ipv6(1) 事务(5)
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
JavaScript获取当前网页标题（title）的方法
2015/04/03 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
React Native中Mobx的使用方法详解
2018/12/04 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
超30万乐谱下载：Musicnotes.com
2016/09/24 全球购物
英国在线滑雪板和冲浪商店：The Board Basement
2020/01/11 全球购物
家长评语和期望
2014/02/10 职场文书
平安建设实施方案
2014/03/19 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js