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 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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中利用XML技术构造远程服务(上)
2006/10/09 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
11行JS代码制作二维码生成功能
2018/03/09 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
Python中函数参数调用方式分析
2018/08/09 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python属于解释型语言么
2020/06/15 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
大三预备党员入党思想汇报
2014/01/08 职场文书
欢迎新生标语
2014/10/06 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis