美文网首页让前端飞数组
Js实现json数组分组合并操作示例

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

作者: a333661d6d6e | 来源:发表于2019-02-15 14:50 被阅读13次

    这篇文章主要介绍了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" }
        ]//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力
      },
      {
        "id": "1003",
        "name": "值3",
        "data": [
          {"id": "1003", "name": "值3", "value": "333333" }
        ]
      }
    ]
    */
    </script>
    

    测试上述代码,可得如下运行结果:

    结语

    感谢您的观看,如有不足之处,欢迎批评指正。

    获取资料

    本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
    对web开发技术感兴趣的同学,欢迎加入Q群:619586920,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
    最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

    相关文章

      网友评论

        本文标题:Js实现json数组分组合并操作示例

        本文链接:https://www.haomeiwen.com/subject/yayjeqtx.html