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 相关文章推荐
javascript IFrame 强制刷新代码
Jul 23 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
Openlayers绘制地图标注
Sep 28 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
需要发散思维学习PHP
2009/06/29 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Python txt文件如何转换成字典
2020/11/03 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
《金色的脚印》教后反思
2014/04/23 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
简历自我评价模板
2015/03/11 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
五一晚会主持词
2015/07/01 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书