首页
所有分类
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判断变量是否空值的代码
Oct 26 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
基于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) pip(1) 字典(3) Counter(1) LOGO(1) MIME(1) 爬虫(2) most_common(1) 并发(8) Xpath(1)
You might like
php中文本数据翻页（留言本翻页）
2006/10/09 PHP
如何对PHP程序中的常见漏洞进行攻击（上）
2006/10/09 PHP
基于PHP文件操作的详解
2013/06/05 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
Yii框架通过请求组件处理get，post请求的方法分析
2019/09/03 PHP
用JS判断IE版本的代码 超管用！
2011/08/09 Javascript
关于js datetime的那点事
2011/11/15 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
[05:17]DOTA2誓师：今天我们在这里 明天TI4等我！
2014/03/26 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
python super用法及原理详解
2020/01/20 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
德国大型的家具商店：Pharao24.de
2016/10/02 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
消防宣传口号
2014/06/16 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
高三英语复习计划
2015/01/19 职场文书
社区端午节活动总结
2015/02/11 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers