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中的有名函数和无名函数
Oct 17 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
vue 实现element-ui中的加载中状态
Nov 11 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
js去除重复字符串两种实现方法
2013/01/09 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
js date 格式化
2017/02/15 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
vue2.x select2 指令封装详解
2017/10/12 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
将python代码和注释分离的方法
2018/04/21 Python
mac下如何将python2.7改为python3
2018/07/13 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
酒店led欢迎词
2014/01/09 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2014年信用社工作总结
2014/11/25 职场文书
安全检查汇报材料
2014/12/26 职场文书
环卫工人慰问信
2015/02/15 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers