数组把key相同值,合并value值(整理)

简介: 数组把key相同值,合并value值(整理)

打印值:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>测试</title>
  </head>
  <body>
  </body>
  <script type="text/javascript">
    var res = [
      [{
          "key": "颜色",
          "value": "黑色"
        },
        {
          "key": "容量",
          "value": "32G"
        }
      ],
      [{
          "key": "颜色",
          "value": "黑色"
        },
        {
          "key": "容量",
          "value": "64G"
        }
      ],
      [{
          "key": "颜色",
          "value": "白色"
        },
        {
          "key": "容量",
          "value": "32G"
        }
      ],
      [{
          "key": "颜色",
          "value": "白色"
        },
        {
          "key": "容量",
          "value": "64G"
        }
      ],
    ];
    var arr1 = []; // 存放所有key(去重后的)
    var arr2 = []; // 组合成想要的格式
    for (var i = 0; i < res.length; i++) {
      for (var j = 0; j < res[i].length; j++) {
        if (!arr1.includes(res[i][j].key)) {
          arr1.push(res[i][j].key);
        }
      }
    }
    for (var i = 0; i < arr1.length; i++) {
      var obj = {
        "key": arr1[i],
        "value": []
      };
      arr2.push(obj);
    }
    // 赋值
    for (var i = 0; i < res.length; i++) {
      for (var j = 0; j < res[i].length; j++) {
        for (var k = 0; k < arr2.length; k++) {
          if (res[i][j].key == arr2[k].key) {
            if (!arr2[k].value.includes(res[i][j].value)) {
              arr2[k].value.push(res[i][j].value);
            }
          }
        }
      }
    }
    console.log(res,'整体数据');
    console.log(arr2,'处理后的数据');
  </script>
</html>


相关文章
|
数据可视化 索引
数据可视化之antv/g6 元素之边(edge)
数据可视化之antv/g6 元素之边(edge)
2246 0
|
5月前
|
机器学习/深度学习 自然语言处理 并行计算
基于DJL的机器学习
本文介绍了基于Java的深度学习框架DJL,涵盖机器学习与深度学习的核心概念、神经网络结构及生命周期,并通过MNIST数据集展示了从模型构建、训练到推理的完整流程。内容深入浅出,适合初学者入门。
330 5
基于DJL的机器学习
|
6月前
|
存储 NoSQL Java
重写 equals 时为什么一定要重写 hashCode ?
我是小假 期待与你的下一次相遇 ~
292 1
|
安全 Android开发 Kotlin
Android经典实战之SurfaceView原理和实践
本文介绍了 `SurfaceView` 这一强大的 UI 组件,尤其适合高性能绘制任务,如视频播放和游戏。文章详细讲解了 `SurfaceView` 的原理、与 `Surface` 类的关系及其实现示例,并强调了使用时需注意的线程安全、生命周期管理和性能优化等问题。
575 8
|
IDE Java 应用服务中间件
Java“ClassNotFoundException”解决
Java中的“ClassNotFoundException”表示JVM找不到指定的类。解决方法包括:确保类路径正确、检查依赖是否完整、确认类名无误、清理和重新构建项目等。
2761 0
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
JavaScript 前端开发 API
vue3的传送门teleport究竟有多神奇?suspense发起异步请求有多简约?
该文章介绍了Vue3中新特性Teleport和Suspense的使用方法,演示了如何使用Teleport进行DOM节点的非父子关系传送,以及Suspense在处理异步组件加载时的优雅展示和错误处理技巧。
|
Go
The “gopls“ command is not available. Run “go get -v golang.org/x/tools/gopls“ to install.【已解决】
The “gopls“ command is not available. Run “go get -v golang.org/x/tools/gopls“ to install.【已解决】
298 3
|
设计模式 Android开发
44. 【Android教程】广播接收器:Broadcast Receiver
44. 【Android教程】广播接收器:Broadcast Receiver
574 2