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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
javascript之学会吝啬 精简代码
Apr 25 Javascript
js的逻辑运算符 ||
May 31 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
Js的Array数组对象详解
Feb 22 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
微信小程序tabBar设置实例解析
Nov 14 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 管理系统程序中的后门
2009/08/05 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
JS实现商品筛选功能
2020/08/19 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
ipad上运行python的方法步骤
2019/10/12 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
医院护理人员的自我评价分享
2013/10/04 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
法律进社区实施方案
2014/03/21 职场文书
授权委托书格式模板
2014/04/03 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
项目安全员岗位职责
2015/02/15 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs