首页
所有分类
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 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
js 替换功能函数，用正则表达式解决，js的全部替换
Dec 08 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统（附源码）
Apr 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
YH-R296(1) SRF-40W(1) 华普R-96(1) 德生1994(1) 纸巾盒(1) SRF-22W(1) PR-D3L(1) ICF-SW100(1) ICF-F10(1) 德生G88(1)
You might like
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
javascript数组详解
2014/10/22 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
js实现开关灯效果
2020/03/30 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python流程控制 if else实现解析
2019/09/02 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
德国骆驼商店：ActiveFashionWorld
2017/11/18 全球购物
Clarks鞋澳大利亚官方网站：Clarks Australia
2019/12/25 全球购物
Internet体系结构
2014/12/21 面试题
求职自荐书范文
2013/12/04 职场文书
鼋头渚导游词
2015/02/05 职场文书
整脏治乱工作简报
2015/07/21 职场文书
初级职称评定工作总结
2015/08/13 职场文书
Meta增速拉垮，元宇宙难当重任
2022/04/29 数码科技