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函数 这个…

Python 将列表拼接为一个字符串,Python join

目录 join方法的源码&#xff1a; 列表数据为字符串 列表数据为数字 三引号也可以使用join join方法的源码&#xff1a; def join(self, abNone, pqNone, rsNone): # real signature unknown; restored from __doc__"""Concatenate any number of strings.T…

harmonyos应用开发者高级认证考试部分答案

1只要使用端云一体化的云端资源就需要支付费用&#xff08;错&#xff09; 2所有使用Component修饰的自定义组件都支持onPageShow&#xff0c;onBackPress和onPageHide生命周期函数。&#xff08;错&#xff09; 3 HarmonyOS应用可以兼容OpenHarmony生态&#xff08;对&#…

一文读懂如何安全地存储密码

目录 引言 明文存储 基本哈希存储 加盐哈希存储 适应性哈希算法 密码加密存储 小结 引言 密码是最常用的身份验证手段&#xff0c;既简单又高效。密码安全是网络安全的基石&#xff0c;对保护个人和组织信息的安全具有根本性的作用。然而有关密码泄漏的安全问题一再发生…

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

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

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

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

UVA1025 城市里的间谍 A Spy in the Metro

UVA1025 城市里的间谍 A Spy in the Metro 题面翻译 题目大意 某城市地铁是一条直线&#xff0c;有 n n n&#xff08; 2 ≤ n ≤ 50 2\leq n\leq 50 2≤n≤50&#xff09;个车站&#xff0c;从左到右编号 1 … n 1\ldots n 1…n。有 M 1 M_1 M1​ 辆列车从第 1 1 1 站开…

【电路笔记】-分压器

分压器 文章目录 分压器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"&…

在vscode下将ipynb文件转成pdf的方法

正常情况下&#xff0c;可以在vscode的ipynb界面点击上面的三个点&#xff0c;里面有export&#xff0c;可以选择直接输出html和pdf&#xff0c;但是需要latex&#xff0c;由于按扎u安装麻烦&#xff0c;所以我换了一种方法。 ----------------------------------------------…

记一次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地址特殊地址形式 子网与子网掩…

[NOIP2013 提高组] 积木大赛

Description 春春幼儿园举办了一年一度的“积木大赛”。今年比赛的内容是搭建一座宽度为 n 的大厦&#xff0c;大厦可以看成由 n 块宽度为 1 的积木组成&#xff0c;第 i 块积木的最终高度需要是 hi​。 在搭建开始之前&#xff0c;没有任何积木&#xff08;可以看成 n 块高度…

使用rsync从OpenShift的pod复制文件

环境 Red Hat Enterprise Linux release 8.6 (Ootpa)OCP 4.12.22 准备 安装rsync&#xff1a; yum install rsync 查看pod&#xff1a; [rootapi.kai1123.cp.fyre.ibm.com ~]# oc get pod -n cpd-instance | grep dmc ...... ibm-dmc-1700727413211000-monitor-0 …

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…