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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
理解javascript闭包
Dec 15 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 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
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
javascript获取元素的计算样式
2019/05/24 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
顶岗实习接收函
2014/01/09 职场文书
银行员工职业规划范文
2014/01/21 职场文书
水毁工程实施方案
2014/04/01 职场文书
大学生活自我评价
2014/04/09 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
蓬莱阁导游词
2015/02/04 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
最新最全的手机号验证正则表达式
2022/02/24 Javascript
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers