js实现json数组分组合并操作示例


Posted in Javascript onFebruary 12, 2019

本文实例讲述了js实现json数组分组合并操作。分享给大家供大家参考,具体如下:

<script>
var arr = [
  {"id":"1001","name":"值1","value":"111"},
  {"id":"1001","name":"值1","value":"11111"},
  {"id":"1002","name":"值2","value":"25462"},
  {"id":"1002","name":"值2","value":"23131"},
  {"id":"1002","name":"值2","value":"2315432"},
  {"id":"1003","name":"值3","value":"333333"}
];
var map = {},
  dest = [];
for(var i = 0; i < arr.length; i++){
  var ai = arr[i];
  if(!map[ai.id]){
    dest.push({
      id: ai.id,
      name: ai.name,
      data: [ai]
    });
    map[ai.id] = ai;
  }else{
    for(var j = 0; j < dest.length; j++){
      var dj = dest[j];
      if(dj.id == ai.id){
        dj.data.push(ai);
        break;
      }
    }
  }
}
console.log(dest);
/*
//运行结果:
[
  {
    "id": "1001",
    "name": "值1",
    "data": [
      {"id": "1001", "name": "值1", "value": "111"},
      { "id": "1001", "name": "值1", "value": "11111"}
    ]
  },
  {
    "id": "1002",
    "name": "值2",
    "data": [
      { "id": "1002", "name": "值2", "value": "25462" },
      { "id": "1002", "name": "值2", "value": "23131"},
      {"id": "1002", "name": "值2","value": "2315432" }
    ]
  },
  {
    "id": "1003",
    "name": "值3",
    "data": [
      {"id": "1003", "name": "值3", "value": "333333" }
    ]
  }
]
*/
</script>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

js实现json数组分组合并操作示例

Javascript 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
Mac下安装vue
Apr 11 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
vue文件运行的方法教学
Feb 12 #Javascript
vue的for循环使用方法
Feb 12 #Javascript
JavaScript常用工具方法封装
Feb 12 #Javascript
vue组件开发props验证的实现
Feb 12 #Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 #Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 #Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 #Javascript
You might like
PHP Google的translate API代码
2008/12/10 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
Python中的下划线详解
2015/06/24 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python多继承原理与用法示例
2018/08/23 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
python使用建议技巧分享(三)
2020/08/18 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
师范应届生教师求职信
2013/11/05 职场文书
实习生的自我评价
2014/01/08 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
银行委托书范本
2014/04/04 职场文书
教师节演讲稿
2014/05/06 职场文书
环保小标语
2014/06/13 职场文书
《角的度量》教学反思
2016/02/18 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python