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中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
layui写后台表格思路和赋值用法详解
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/03/10 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
php检测文本的编码
2015/07/26 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
公司年会演讲稿范文
2014/01/11 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
档案室主任岗位职责
2014/02/12 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
小学教师岗位职责
2015/04/02 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
python实现简单石头剪刀布游戏
2021/10/24 Python