经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
js根据json数据中的某一个属性来给数据分组的方法
来源：jb51　　时间：2018/10/10 8:46:04　　对本文有异议

如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<span id ="span" style="width: 50px;height: 200px;"></span>
  9. 	</body>
  10. 	<script>
  11. 	var arr = [{"Group":1,"Groupheader":"质量管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
  12. {"Group":1,"Groupheader":"","Leftimg":"","Left":"","Min":"质量巡检","Right":"","Rightimg":""},
  13. {"Group":2,"Groupheader":"设备管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
  14. {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备专业点检","Right":"","Rightimg":""},
  15. {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备日检","Right":"","Rightimg":""},
  16. {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备周检","Right":"","Rightimg":""},
  17. {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备月检","Right":"","Rightimg":""}];
  18.  
  19. var map = {},
  20.  dest = [];
  21. for(var i = 0; i < arr.length; i++){
  22.  var ai = arr[i];
  23.  if(!map[ai.Group]){
  24.   dest.push({
  25.    Group: ai.Group,
  26.   
  27.    data: [ai]
  28.   });
  29.   map[ai.Group] = ai;
  30.  }else{
  31.   for(var j = 0; j < dest.length; j++){
  32.    var dj = dest[j];
  33.    if(dj.Group == ai.Group){
  34.     dj.data.push(ai);
  35.     break;
  36.    }
  37.   }
  38.  }
  39. }
  40. console.log(JSON.stringify(dest));
  41. 	var sapn = document.getElementById("span");
  42. 	span.innerHTML = JSON.stringify(dest);
  43. 	</script>
  44. </html>

原始数据：

  1. [{"Group":1,"Groupheader":"质量管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
  2. {"Group":1,"Groupheader":"","Leftimg":"","Left":"","Min":"质量巡检","Right":"","Rightimg":""},
  3. {"Group":2,"Groupheader":"设备管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
  4. {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备专业点检","Right":"","Rightimg":""},
  5. {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备日检","Right":"","Rightimg":""},
  6. {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备周检","Right":"","Rightimg":""},
  7. {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备月检","Right":"","Rightimg":""}];

处理后的数据：

  1. [
  2.  {
  3.   "Group": 1,
  4.   "data": [
  5.    {
  6.     "Group": 1,
  7.     "Groupheader": "质量管理",
  8.     "Leftimg": "",
  9.     "Left": "",
  10.     "Min": "",
  11.     "Right": "",
  12.     "Rightimg": ""
  13.    },
  14.    {
  15.     "Group": 1,
  16.     "Groupheader": "",
  17.     "Leftimg": "",
  18.     "Left": "",
  19.     "Min": "质量巡检",
  20.     "Right": "",
  21.     "Rightimg": ""
  22.    }
  23.   ]
  24.  },
  25.  {
  26.   "Group": 2,
  27.   "data": [
  28.    {
  29.     "Group": 2,
  30.     "Groupheader": "设备管理",
  31.     "Leftimg": "",
  32.     "Left": "",
  33.     "Min": "",
  34.     "Right": "",
  35.     "Rightimg": ""
  36.    },
  37.    {
  38.     "Group": 2,
  39.     "Groupheader": "",
  40.     "Leftimg": "",
  41.     "Left": "",
  42.     "Min": "设备专业点检",
  43.     "Right": "",
  44.     "Rightimg": ""
  45.    },
  46.    {
  47.     "Group": 2,
  48.     "Groupheader": "",
  49.     "Leftimg": "",
  50.     "Left": "",
  51.     "Min": "设备日检",
  52.     "Right": "",
  53.     "Rightimg": ""
  54.    },
  55.    {
  56.     "Group": 2,
  57.     "Groupheader": "",
  58.     "Leftimg": "",
  59.     "Left": "",
  60.     "Min": "设备周检",
  61.     "Right": "",
  62.     "Rightimg": ""
  63.    },
  64.    {
  65.     "Group": 2,
  66.     "Groupheader": "",
  67.     "Leftimg": "",
  68.     "Left": "",
  69.     "Min": "设备月检",
  70.     "Right": "",
  71.     "Rightimg": ""
  72.    }
  73.   ]
  74.  }
  75. ]

以上这篇js根据json数据中的某一个属性来给数据分组的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号