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 相关文章推荐
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 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实现利用MySQL保存session的方法
2014/08/23 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
php中如何执行linux命令详解
2018/11/06 PHP
javascript中对对层的控制
2006/12/29 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
利用python代码写的12306订票代码
2015/12/20 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
Python 函数基础知识汇总
2018/03/09 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python安装twisted的问题解析
2018/08/21 Python
pytorch 求网络模型参数实例
2019/12/30 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
医院实习介绍信
2014/01/12 职场文书
合作意向书格式及范文
2014/03/31 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
个人年底工作总结
2015/03/10 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
诚实守信主题班会
2015/08/13 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
无线电知识基础入门篇
2022/02/18 无线电
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
Java完整实现记事本代码
2022/06/16 Java/Android