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 常见开发使用技巧总结
Dec 26 Javascript
jquery tab标签页的制作
May 10 Javascript
js中split和replace的用法实例
Feb 28 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
javascript实现前端分页效果
Jun 24 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
JavaScript中交换值的10种方法总结
Aug 18 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
python实现简易通讯录修改版
2018/03/13 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
幼儿园消防安全制度
2014/01/26 职场文书
消防应急演练方案
2014/02/12 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
公司年会策划方案
2014/05/17 职场文书
学生会干部任命书
2015/09/21 职场文书
初二物理教学反思
2016/02/19 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS