js实现json数组分组合并操作示例

 更新时间:2019年02月12日 11:28:59   作者:东边的小山  
这篇文章主要介绍了js实现json数组分组合并操作,涉及javascript针对json数组的遍历、判断、添加、赋值等相关操作技巧,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行结果:

PS:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用:

在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json

JSON在线格式化工具:
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具:
http://tools.jb51.net/code/json_yasuo_trans

更多关于JavaScript相关内容可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JavaScript常用工具方法封装

    JavaScript常用工具方法封装

    今天小编就为大家分享一篇关于JavaScript常用工具方法封装,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • 如何使用不同的方法在 JavaScript 中添加两个向量

    如何使用不同的方法在 JavaScript 中添加两个向量

    这篇文章主要介绍了如何在 JavaScript 中添加向量(Vector)类,使用不同的方法在 JavaScript 中添加两个向量,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • JavaScript Date 知识浅析

    JavaScript Date 知识浅析

    这篇文章主要介绍了JavaScript Date 知识,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-01
  • 小程序实现上下移动切换位置

    小程序实现上下移动切换位置

    这篇文章主要为大家详细介绍了小程序实现上下移动切换位置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • layui的form.on的使用示例详解

    layui的form.on的使用示例详解

    这篇文章主要介绍了layui的form.on的使用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • TypeScript泛型的使用详细介绍

    TypeScript泛型的使用详细介绍

    在TypeScript中,泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用,而是能被多种类型复用。类似于参数的作用,泛型是一种用以增强类(classes)、类型(types)和接口(interfaces)能力的非常可靠的手段
    2022-09-09
  • Javascript实现图片加载从模糊到清晰显示的方法

    Javascript实现图片加载从模糊到清晰显示的方法

    这篇文章主要介绍了使用Javascript实现图片加载从模糊到清晰显示的方法,通俗易懂,需要的朋友可以参考下。
    2016-06-06
  • 原生JS实现动态添加新元素、删除元素方法

    原生JS实现动态添加新元素、删除元素方法

    这篇文章主要介绍了原生js实现动态添加新元素、删除元素方法 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • JS组件Bootstrap Table表格行拖拽效果实现代码

    JS组件Bootstrap Table表格行拖拽效果实现代码

    这篇文章分享了JS组件Bootstrap Table表格行拖拽效果实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 禁止你的左键复制实用技巧

    禁止你的左键复制实用技巧

    左键复制对于所有人来说有好有坏,例如原创内容就不想被别人复制,接下来介绍一种方法,有需要的朋友可以参考下
    2013-01-01

最新评论