多源字段聚合重塑算法

news2024/9/20 22:48:19

要求如下

[
    [
        {
            "oone": "评估是否聘请第三方机构",
            "otwo": null,
            "othree": "test",
        },
        {
            "oone": "评估是否聘请第三方机构",
            "otwo": null,
            "othree": "test",
        }
    ],
    [
        {
            "oone": "评估是否聘请第三方机构",
            "otwo": null,
            "othree": "test",
        },
        {
            "oone": "评估是否聘请第三方机构",
            "otwo": null,
            "othree": "test",
        }
    ]
]

<!-- 转换成 -->
[
    {
        "oone": "评估是否聘请第三方机构",
        "otwo": null,
        "othree_1": "test",
        "othree_2": "test"
    },
    {
        "oone": "评估是否聘请第三方机构",
        "otwo": null,
        "othree_1": "test",
        "othree_2": "test"
    }
]


代码实战

function transformData(data) {
  // 确定最终结果数组中的对象数量
  const numObjectsInResult = data[0].length;
  // 使用空对象初始化结果数组
  const result = Array.from({ length: numObjectsInResult }, (_, objIndex) => {
    const firstObjectOfSubArray = data[0][objIndex];
    return { ...firstObjectOfSubArray };
});

  // 迭代原始数据中的每个子数组
  data.forEach((subArray, subArrayIndex) => {
      // 对子数组中的每个对象进行迭代
      subArray.forEach((obj, objIndex) => {
          // 将othree值添加到结果数组中的相应对象
          result[objIndex][`othree_${subArrayIndex + 1}`] = obj.othree;
      });
  });

  return result;
}

const originalData = [
  [
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"},
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"},
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"}
  ],
  [
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"},
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"},
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"}
  ],
  [
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"},
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"},
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"}
  ],
  [
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"},
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"},
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"}
  ],
  [
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"},
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"},
      {"oone": "评估是否聘请第三方机构", "otwo": null, "othree": "test"}
  ]
];

const result = transformData(originalData);
console.log(result);

算法优化

  1. 减少数组遍历次数
  2. 避免不必要的对象复制
  3. 使用Map或对象作为临时存储
function transformData(data) {
  const numObjectsInResult = data[0].length;
  const result = new Map();

  // 初始化Map,添加othree属性的初始值
  data[0].forEach((obj, index) => {
    result.set(index, { ...obj });
    for (let i = 1; i <= data.length; i++) {
      result.get(index)[`othree_${i}`] = null;
    }
  });

  // 遍历data填充othree值
  data.forEach((subArray, subArrayIndex) => {
    subArray.forEach((obj, objIndex) => {
      result.get(objIndex)[`othree_${subArrayIndex + 1}`] = obj.othree;
    });
  });

  // 将Map转换回数组
  return Array.from(result.values());
}

应用场景

  1. 在vue中前面几个列可能是固定的, 后边几个列是动态展示
    在这里插入图片描述
    在这里插入图片描述

          <template v-if="questionList.length > 0">
            <el-col class="third-el-col" :style="{width: questionlenght}">
              <el-card>
                <el-table
                  :data="questionListFix"
                  :span-method="objectSpanMethodThirdFix"
                >
                  <el-table-column label="问卷内容" rowspan="2" align="center">
                    <el-table-column
                      prop="oone"
                      label="问题"
                      align="center"
                      width="250px"
                    ></el-table-column>
                    <el-table-column
                      prop="otwo"
                      label="子项"
                      align="center"
                      width="100px"
                    ></el-table-column>

                        <el-table-column
                          v-for="(column, index) in dynamicColumns"
                          :key="index"
                          :prop="column.prop"
                          :label="column.label"
                          align="center"
                        >
                          <template v-slot="scope">
                            <MathInput
                              :disabled="true"
                              :isTable="true"
                              v-model="scope.row[column.prop]"
                            >
                            </MathInput>
                          </template>
                        </el-table-column>

                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </template>

		//添加动态列的数据
      this.dynamicColumns.splice(0);
      let counter = 1;
      for (let i = 0; i < this.seachInfoIdList.length; i++) {
        this.dynamicColumns.push({
          prop: `othree_${counter++}`,
          label: `填写内容(${this.taskInfoIdMap.get(this.seachInfoIdList[i])})`
        });
      }
   // questionListFix 根据  上边的算法进行调整就可以了

解释

  1. dynamicColumns 是动态拼接的列

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1935971.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用 Flask 3 搭建问答平台(三):注册页面模板渲染

前言 前端文件下载 链接https://pan.baidu.com/s/1Ju5hhhhy5pcUMM7VS3S5YA?pwd6666%C2%A0 知识点 1. 在路由中渲染前端页面 2. 使用 JinJa 2 模板实现前端代码复用 一、auth.py from flask import render_templatebp.route(/register, methods[GET]) def register():re…

Elasticsearch:评估搜索相关性 - 第 1 部分

作者&#xff1a;来自 Elastic Thanos Papaoikonomou, Thomas Veasey 这是一系列博客文章中的第一篇&#xff0c;讨论如何在更好地理解 BEIR 基准的背景下考虑评估你自己的搜索系统。我们将介绍具体的技巧和技术&#xff0c;以便在更好地理解 BEIR 的背景下改进你的搜索评估流程…

java用freemarker导出word

freemarker导出word 第一步、将word转换为xml格式第二步、将转换后的xml文件修改后缀为ftl后复制到项目 resources 目录下&#xff08;可以自己新建一个文件夹放在文件夹中&#xff09;第三步、格式化xml代码&#xff08;如果问价太大可能会无法格式化&#xff09;这时候需要在…

鸿蒙语言基础类库:【@system.router (页面路由)】

页面路由 说明&#xff1a; 从API Version 8 开始&#xff0c;该接口不再维护&#xff0c;推荐使用新接口[ohos.router])。本模块首批接口从API version 3开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import router from system.ro…

Unity扩展SVN命令

可以直接在unity里右键文件提交和查看提交记录 顶部菜单栏上回退和更新整个unity工程 SvnForUnity.CS 记得要放在Editor文件夹下 using System.Collections; using System.Collections.Generic; using System.Diagnostics; using System.IO; using UnityEditor; using Unity…

前端pc和小程序接入快递100(跳转方式和api方式)====实时查询接口

文章目录 跳转方式微信小程序&#xff08;我以uniapp为例&#xff09;pc api接入说明关于签名计算成功示例 跳转方式 没有任何开发成本&#xff0c;直接一键接入 可以直接看官方文档 https://www.kuaidi100.com/openapi/api_wxmp.shtml 微信小程序&#xff08;我以uniapp为例…

算法日记day 11(KMP算法)

一、KMP算法 基本原理&#xff1a; KMP算法&#xff08;Knuth-Morris-Pratt算法&#xff09;是一种用于在一个文本串&#xff08;字符串&#xff09;中查找一个模式串&#xff08;子串&#xff09;的高效算法。它的主要优点是在匹配过程中避免了回溯&#xff08;backtracking…

【QT】label中添加QImage图片并旋转(水平翻转、垂直翻转、顺时针旋转、逆时针旋转)

目录 0.简介 1.详细代码及解释 1&#xff09;原label显示在界面上 2&#xff09;水平翻转 3&#xff09;垂直翻转 4&#xff09;顺时针旋转45度 5&#xff09;逆时针旋转 0.简介 环境&#xff1a;windows11 QtCreator 背景&#xff1a;demo&#xff0c;父类为QWidget&a…

盒须图boxplot 展示第6条线

正常情况下&#xff0c;盒须图是有5条线的&#xff0c;但是实际产品场景是需要6条线&#xff0c;看了下echarts官网&#xff0c;没看到可配置的地方&#xff0c;只能自己骚操作了&#xff0c;效果图如下&#xff1a; 重点&#xff1a;用两条x轴&#xff0c;第6条线挂在第二条x…

【flink】之如何快速搭建一个flink项目

1.通过命令快速生成一个flink项目 curl https://flink.apache.org/q/quickstart.sh | bash -s 1.19.1 生成文件目录&#xff1a; 其中pom文件包好我们所需要的基础flink相关依赖 2.测试 public class DataStreamJob {public static void main(String[] args) throws Except…

GitHub 令牌泄漏, Python 核心资源库面临潜在攻击

TheHackerNews网站消息&#xff0c;软件供应链安全公司 JFrog 的网络安全研究人员称&#xff0c;他们发现了一个意外泄露的 GitHub 令牌&#xff0c;可授予 Python 语言 GitHub 存储库、Python 软件包索引&#xff08;PyPI&#xff09;和 Python 软件基金会&#xff08;PSF&…

《昇思25天学习打卡营第25天|onereal》

初学入门/初学教程/08-模型训练.ipynb 模型训练 模型训练一般分为四个步骤&#xff1a; 构建数据集。定义神经网络模型。定义超参、损失函数及优化器。输入数据集进行训练与评估。 现在我们有了数据集和模型后&#xff0c;可以进行模型的训练与评估。 构建数据集 首先从数…

国内AI算力芯片厂商群雄逐鹿,创新产品引领边缘计算新风尚

近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;AI算力芯片作为支撑这一技术的关键基础设施&#xff0c;受到了前所未有的关注。国内厂商纷纷加入竞争&#xff0c;四川万物纵横科技就是其中争流涌进的一员&#xff0c;公司不仅在技术上追求创新&#xff0c;还在市场…

FastAPI 学习之路(五十二)WebSockets(八)接受/发送json格式消息

前面我们发送的大多数都是text类型的消息&#xff0c;对于text消息来说&#xff0c;后端处理出来要麻烦的多&#xff0c;那么我们可以不可以传递json格式的数据&#xff0c;对于前后端来说都比较友好&#xff0c;答案是肯定的&#xff0c;我们需要做下处理。 首先&#xff0c;…

LNMP环境配置问题整理

首先是一键安装直接报错&#xff1a; 换教程&#xff1a;搭建LNMP&#xff0c;步骤最详细&#xff0c;附源码&#xff0c;学不会打我-CSDN博客 mysql安装成功之后&#xff1a; MySQL 启动报错&#xff1a;Job for mysqld.service failed because the control process exited …

Java 在PDF中替换文字(详解)

目录 使用工具 Java在PDF中替换特定文字的所有实例 Java在PDF中替换特定文字的第一个实例 Java在PDF中使用正则表达式替换特定文字 其他替换条件设置 可能出现的问题及解决方案 PDF文档中的信息随时间的推移可能会发生变化&#xff0c;比如产品价格、联系方式等。为了确保…

迭代学习笔记

一、迭代学习定义和分类 1、直观理解 迭代学习一般应用于重复性的场景。比如控制一个单自由度的小车以特定的速度曲线移动到指定位置&#xff0c;整个时间是10s&#xff0c;控制频率是0.01&#xff0c;那么整个控制序列就会有1000个点。这1000个点在10s内依次发出&#xff0c…

网络编程-TCP 协议的三次握手和四次挥手做了什么

TCP 协议概述 1. TCP 协议简介 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输层通信协议。 TCP 协议提供可靠的通信服务&#xff0c;通过校验和、序列号、确认应答、重传等机制保证数据传输…

Pytorch学习笔记day4——训练mnist数据集和初步研读

该来的还是来了hhhhhhhhhh&#xff0c;基本上机器学习的初学者都躲不开这个例子。开源&#xff0c;数据质量高&#xff0c;数据尺寸整齐&#xff0c;问题简单&#xff0c;实在太适合初学者食用了。 今天把代码跑通&#xff0c;趁着周末好好的琢磨一下里面的各种细节。 代码实…

C++内存管理(区别C语言)深度对比

欢迎来到我的Blog&#xff0c;点击关注哦&#x1f495; 前言 前面已经介绍了类和对象&#xff0c;对C面向对象编程已经有了全面认识&#xff0c;接下来要学习对语言学习比较重要的是对内存的管理。 一、内存的分区 代码区&#xff1a;存放程序的机器指令&#xff0c;通常是可…