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 相关文章推荐
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
javascript中Object使用详解
Jan 26 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
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+MySQL的聊天室设计
2006/10/09 PHP
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
php检测文件编码的方法示例
2014/04/25 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
python检查指定文件是否存在的方法
2015/07/06 Python
Python验证码识别处理实例
2015/12/28 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python如何输出整数
2020/06/07 Python
专科毕业生求职简历的自我评价
2013/10/12 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL