首页
所有分类
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 相关文章推荐
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
JavaScript仿微信（电话）联系人列表滑动字母索引实例讲解（推荐）
Aug 16 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
基于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
exists(2) 远程桌面(2) cmd(1) REST(1) 相对路径 (1) 面向对象(3) mt-swipe(1) Mint UI(1) 慢日志(1) 相对路径(1)
You might like
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
php仿discuz分页效果代码
2008/10/02 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python高斯消除矩阵
2019/01/02 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
财务管理专业自荐信范文
2013/12/24 职场文书
高考学习决心书
2015/02/04 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
《灰雀》教学反思
2016/02/19 职场文书
教你如何用Python实现人脸识别（含源代码）
2021/06/23 Python
golang语言指针操作
2022/04/14 Golang