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的倒计时插件代码
May 07 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
JavaScript中严格判断NaN的方法
Feb 16 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
js正则匹配多个全部数据问题
Dec 20 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
php 函数使用方法与函数定义方法
2010/05/09 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
python画图的函数用法以及技巧
2019/06/28 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
幼教简历自我评价
2014/01/28 职场文书
初三班主任寄语大全
2014/04/04 职场文书
2015年公司新年寄语
2014/12/08 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技