首页
所有分类
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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
jquery滚动特效集锦
Jun 03 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 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) XDM(3) redis(3) 构造函数(1) 验证表达式(1) AOP(2) gRPC(3) PyAutoGUI(1) promise(2)
You might like
php at(@)符号的用法简介
2009/07/11 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
Python中for循环控制语句用法实例
2015/06/02 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
python删除字符串中指定字符的方法
2018/08/13 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
戛纳奢侈品商店：Jacques Loup法国
2019/11/04 全球购物
高中军训感言1000字
2014/03/01 职场文书
给市场的环保建议书
2014/05/14 职场文书
团队拓展活动方案
2014/08/28 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
《正面管教》读后有感：和善而坚定的旅程
2019/12/19 职场文书
关于Vue中的options选项
2022/03/22 Vue.js
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python