js实现获取原生form表单的数据序列化表单以及将数组转化为一个对象obj,将数组中的内容作为对象的key转化为对象,对应的值转换为对象对应的值

1.需求场景

哈喽 大家好啊,今天遇到一个场景,

js实现获取原生form表单的数据序列化表单以及将数组转化为一个对象obj,将数组中的内容作为对象的key转化为对象,对应的值转换为对象对应的值

数组对象中某个属性的值,转换为新对象的属性,数组对象中另外一个属性的值,转换为对应对象属性的值输出

(1)因为我是用原生写的form表单,然后我想在确认的时候拿到form表单

(2)我的form表单是通过数组轮询的,所以会有多个,我要将我填写的表单组成一个数组对象的形式

类似下面遍历的表单:

2.实现方案和代码

首先我的表单定义一个class变量,后续根据我得到的数组进行遍历的时候进行动态命名

 <div v-for='item,index in selectedData'><form method="post" :class="'form'+index"></form>
</div>

这样我的表单都有各个对应class的名称了 form0  form1  form2....

然后我们在点击确认事件的时候去拿表单序列化的数据

selectedDataTemp 是一个我的数组,根据数组生成对应的表单
let serializeFormData = [];selectedDataTemp.forEach((item,index) => {serializeFormData = $(`.form${index}`).serializeArray();console.log(serializeFormData,'serializeFormData')})
}

打印出来的serializeFromData

此时我们看到的是一个数组,里面每个对象里面都包含属性name 和value 对应的是我们表单的属性以及属性值

所以我的目标是将数据转换成一个对象

[{"name": "ImportedItems","value": "1"},{"name": "endUse","value": "0"},{"name": "region","value": "22"},{"name": "isControll","value": "1"},{"name": "exportCode","value": "22"}
]

想转换成

{"ImportedItems": "1","endUse": "0","region": "33","isControll": "1","exportCode": "33"
}

实现方案:

       var list = {};// for in 循环for (var key in serializeFormData) {let keyTemp = serializeFormData[key].name;let valueTemp = serializeFormData[key].value;list[keyTemp] = valueTemp;}完整代码:
let serializeFormData = [];selectedDataTemp.forEach((item,index) => {serializeFormData = $(`.form${index}`).serializeArray();console.log(serializeFormData,'serializeFormData')var list = {};// for in 循环for (var key in serializeFormData) {let keyTemp = serializeFormData[key].name;let valueTemp = serializeFormData[key].value;list[keyTemp] = valueTemp;}console.log(list,'单个表单'); //控制台打印formListData.push(list)})

最后打印的结果

参考原文:

js将数组转化为一个对象obj,将数组中的内容作为对象的key转化为对象,将数组中的某项内容作为分类来转成对象_js将对象数组转换为 key value foreach map-CSDN博客

就是我希望组装的数据啦,好啦,今天就到这里啦,下次再见额!

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

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

相关文章

元宇宙现已开放!

在 2023 年 11 月 3 日 The Sandbox 首个全球创作者日上&#xff0c;The Sandbox 联合创始人 Arthur Madrid 和 Sebastien Borget 宣布元宇宙已开放&#xff0c;已创作完整体验的 LAND 持有者可以自行将体验发布至 The Sandbox 地图上。 精选速览 LAND 持有者&#xff1a;如果…

在JVM中 判定哪些对象是垃圾?

目录 垃圾的条件 1、引用计数法 2、可达性分析 3、强引用 4、软引用 5、弱引用 6、虚引用 判断垃圾的条件 在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;垃圾收集器负责管理内存&#xff0c;其中的垃圾收集算法用于确定哪些对象是垃圾&#xff0c;可以被回收…

VBA即用型代码手册之工作薄的关闭保存及创建

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。可以大大提高自己的劳动效率&#xff0c;而且可以提高数据的准确性。我这里专注VBA,将我多年的经验汇集在VBA系列九套教程中。 作为我的学员要利用我的积木编程思想&#xff0c;积木编程最重要的是积木如何搭建…

[Latex] Riemann 问题中的激波,接触间断,膨胀波的 Tikz 绘图

Latex 代码 \begin{figure}\begin{subfigure}[b]{0.32\textwidth}\centering\resizebox{\linewidth}{!}{\begin{tikzpicture}\coordinate (o) at (0,0);\coordinate (Si) at (2.5,2.5);\coordinate (x) at (1,0);\draw[->] (0,0) -- (3,0) node[right] {$x$};\draw[->] …

ArkTS-自定义组件学习

文章目录 创建自定义组件页面和自定义组件生命周期自定义组件和页面的区别页面生命周期(即被Entry修饰的组件)组件生命周期(即被Component修饰的组件) Builder装饰器&#xff1a;自定义构建函数按引用传递参数按值传递参数 BuilderParam装饰器&#xff1a;引用Builder函数 这个…

生物动力葡萄酒和有机葡萄酒一样吗?

农业维持了数十万年的文明&#xff0c;但当人类以错误的方式过多干预&#xff0c;过于专注于制造和操纵产品时&#xff0c;农业往往会失败。如果我们的目标是获得最高质量的收成&#xff0c;并长期坚持我们的做法&#xff0c;我们就必须与土地打交道。 当我们开始寻找生物动力…

应用内测分发平台如何上传应用包体?

●您可免费将您的应用&#xff08;支持苹果.ios安卓.apk文件&#xff09;上传至咕噜分发平台&#xff0c;我们将免费为应用生成下载信息&#xff0c;但咕噜分发将会对应用的下载次数进行收费&#xff08;每个账号都享有免费赠送的下载点数以及参加活动的赠送点数&#xff09;&a…

【电路笔记】-分压器

分压器 文章目录 分压器1、概述2、负载分压器3、分压器网络4、无功分压器4.1 电容分压器4.2 感应分压器 5、总结 有时&#xff0c;需要精确的电压值作为参考&#xff0c;或者仅在需要较少功率的电路的特定阶段之前需要。 分压器是解决此问题的一个简单方法&#xff0c;因为它们…

【Vue】filter的用法

上一篇&#xff1a; vue的指令 https://blog.csdn.net/m0_67930426/article/details/134599378?spm1001.2014.3001.5502 本篇所使用指令 v-for v-on v-html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…

记一次docker服务启动失败解决过程

环境&#xff1a;centos 7.6 报错&#xff1a;start request repeated too quickly for docker.service 由于服务器修复了内核漏洞&#xff0c;需要重启&#xff0c;没想到重启后&#xff0c;docker启动失败了 查看状态 systemctl status docker如下图 里面有一行提示&…

网络互联与IP地址

目录 网络互联概述网络的定义与分类网络的定义网络的分类 OSI模型和DoD模型网络拓扑结构总线型拓扑结构星型拓扑结构环型拓扑结构 传输介质同轴电缆双绞线光纤 介质访问控制方式CSMA/CD令牌 网络设备网卡集线器交换机路由器总结 IP地址A、B、C类IP地址特殊地址形式 子网与子网掩…

DCDC电感发热啸叫原因分析

一、电感发热啸叫原因解析 发热原因&#xff1a;电感饱和&#xff0c;实际使用的电感值<理论电感计算值 原因1&#xff1a;电感选择过小&#xff0c;计算值不合理。 原因2&#xff1a;PCB布局不合理&#xff0c;屏蔽型电感下方应设禁止铺铜区。 啸叫原因&#xff1a; 人耳的…

Log4j2.xml不生效:WARN StatusLogger Multiple logging implementations found:

背景 将 -Dlog4j.debug 添加到IDEA的类的启动配置中 运行上图代码&#xff0c;这里log4j2.xml控制的日志级别是info&#xff0c;很明显是没生效。 DEBUG StatusLogger org.slf4j.helpers.Log4jLoggerFactory is not on classpath. Good! DEBUG StatusLogger Using Shutdow…

Camera Raw v16.0.0(PS Raw增效工具)

Camera Raw 16是一款允许摄影师处理原始图像文件的软件PS增效工具。原始图像文件是未经相机内部软件处理的数码照片&#xff0c;因此包含相机传感器捕获的所有信息。Camera Raw 为摄影师提供了一种在将原始文件转换为更广泛兼容的格式&#xff08;如 JPEG 或 TIFF&#xff09;之…

搭建SRS视频服务器

去官方网站下载FFmpeg6.1 https://ffmpeg.org/download.html拷贝到CentOS7.9中的/opt目录下&#xff0c;解压并重命名 tar -xvf ffmpeg-6.1.tar.xz 解压后编译安装 ./configure make make install从github下载SRS4.0release 解压后 如果ffmpeg的路径不在/usr/local/bin/ffmpe…

【MATLAB】全网入门快、免费获取、持续更新的科研绘图教程系列2

14 【MATLAB】科研绘图第十四期表示散点分布的双柱状双Y轴统计图 %% 表示散点分布的双柱状双Y轴统计图%% Made by Lwcah &#xff08;公众号&#xff1a;Lwcah&#xff09; %% 公众号&#xff1a;Lwcah %% 知乎、B站、小红书、抖音同名账号:Lwcah&#xff0c;感谢关注~ %% 更多…

LeetCode二叉树小题目

Q1将有序数组转换为二叉搜索树 题目大致意思就是从一个数组建立平衡的二叉搜索树。由于数组以及进行了升序处理&#xff0c;我们只要考虑好怎么做到平衡的。平衡意味着左右子树的高度差不能大于1。由此我们可以想着是否能用类似二分递归来解决。 如果left>right,直接返回nul…

IO多路转接之epoll

目录 一. epoll的实现原理 二. epoll的相关接口 2.1 epoll_create -- 创建epoll模型 2.2 epoll_ctl -- 对epoll模型进行控制 2.3 epoll_wait -- 等待epoll所关注的事件就绪 2.4 epoll相关接口的使用方法 三. Epoll服务器的模拟实现 3.1 EpollServer类的声明 3.2 Epoll…

网工内推 | 美的、得力集团,包吃包住,IE认证优先,14薪

01 美的 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1.负责IT网络设备、IDC机房的日常维护巡检、监控和管理&#xff1b; 2.负责路由、交换、防火墙、无线控制器、AP等网络设备的开通、调整、优化升级&#xff1b; 3.负责公司OT、IT网络规划&#xff0c;项目实施以…

路由VRRP配置例子

拓朴如下&#xff1a; 主要配置如下&#xff1a; [R1] interface GigabitEthernet0/0/0ip address 10.1.1.1 255.255.255.0 vrrp vrid 1 virtual-ip 10.1.1.254vrrp vrid 1 priority 200vrrp vrid 1 preempt-mode timer delay 20 # interface GigabitEthernet0/0/1ip address …