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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
js实现简单贪吃蛇游戏
May 15 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
MVC模式的PHP实现
2006/10/09 PHP
PHP实时显示输出
2008/10/02 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
js获取网页高度(详细整理)
2012/12/28 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python并发编程之线程实例解析
2017/12/27 Python
python使用RNN实现文本分类
2018/05/24 Python
基于python历史天气采集的分析
2019/02/14 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
机械电子工程专业自荐书
2014/06/10 职场文书
安全目标管理责任书
2014/07/25 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
爱的教育读书笔记
2015/06/26 职场文书