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 相关文章推荐
Node调试工具JSHint的安装及配置教程
May 27 Javascript
js实现拖拽效果
Feb 12 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
学习Node.js模块机制
Oct 17 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
vue学习笔记之slot插槽用法实例分析
Feb 29 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 cron中的批处理
2008/09/16 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
python简单读取大文件的方法
2016/07/01 Python
python实现12306火车票查询器
2017/04/20 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
Python decimal模块使用方法详解
2020/06/08 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Python连接Impala实现步骤解析
2020/08/04 Python
Python实现上下文管理器的方法
2020/08/07 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS