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 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
php学习之 认清变量的作用范围
2010/01/26 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
php字符串函数学习之substr()
2015/03/27 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
js如何验证密码强度
2020/03/18 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python简单的制作图片验证码实例
2017/05/31 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
判断Python中的Nonetype类型
2021/05/25 Python