首页
所有分类
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 相关文章推荐
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
jquery分页对象使用示例
Apr 01 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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
redis(3) Kotlin(1) Spring Security(2) Android Gradle(1) 验证表达式(1) 动态权限(1) 记事本(1) promise(2) AOP(2) XDM(3)
You might like
无法在发生错误时创建会话，请检查 PHP 或网站服务器日志，并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
jQuery 行级解析读取XML文件（附源码）
2009/10/12 Javascript
jQuery 瀑布流 绝对定位布局（二）(延迟AJAX加载图片)
2012/05/23 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Django内容增加富文本功能的实例
2017/10/17 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
美德好少年主要事迹
2014/01/29 职场文书
2015年资料员工作总结
2015/04/25 职场文书
Python利用FlashText算法实现替换字符串
2022/03/31 Python