当前位置: 首页 > news >正文

前端字符串转数组对象实现方式-开发bug总结6

问题描述:

后台管理系统,这次投产完线上出现了个问题!element-ui组件下拉选项框打开全部都是无数据,而且控制台报错,但是新添加的数据是正常显示的。对比了原因之后发现,新的数据前端传给后端的格式:"[{name:1}, {name:2}]",是这样的字符串,所以后端再传回来的时候,是有对应的key 和 value值的,只需将字符串处理成数组即可。

但是老的数据,后端返回给我的是这样的:"1, 2" ,这样的格式给我,那页面肯定显示不出来呀,而且也就报错。

本来就是后端的问题,但是他说不好改,于是只能前端来处理传递的入参格式了,下面分享下处理方法!

解决方法:

1)入参格式转化 "[{name:1}, {name:2}]" 转成 "1,2"这种形式传给后端

let dialogFormObj = {}

let arr = []

if (this.options && this.options.length !==0) {

        this.options.map(v => {

        // 此处判断下拉选是否有值,有再push进数组

                if (v.name !== ' ') {

                        arr.push(v.name)

                }

        })

        dialogFormObj = JSON.parse(JSON.stringify(this.dialogForm))

        // 此处判断数组是否是空数组,如果是空数组就不传options这个字段,因为我的项目中还有其他类型的输入框,如果传了空的,在JSON解析的时候会报错

        if (arr.length !== 0) {

                dialogFormObj.options = arr.join(',')

        }

}

addTemplate(dialogFormObj).then(res => {

})

2) 接口返回的出参格式转化 "1,2" 后前端再转成 [{name:1}, {name:2}]类型,进行渲染

let obj = {id: this.id}

getInfo(obj).then(res => {

        let optionsArr = []

        res.data.forEach(i => {

                if (i.options) {

                       //  字符串分割成数组

                        i.options = i.options.split(',')

                        // 下一次添加前先清空之前的

                        optionsArr = []

                        // 此处遍历数组,为每一个属性添加key值,转成数组对象形式。当然这种方式仅针对key相同的,如果每一个key都不同,要采取另外的办法了

                        i.options.forEach(v => {

                                const obj = {}

                                obj.name = v

                                optionsArr.push(obj)

                        })

                        i.options = optionsArr

                }

        })

}) 

相关文章:

前端字符串转数组对象实现方式-开发bug总结6

问题描述: 后台管理系统,这次投产完线上出现了个问题!element-ui组件下拉选项框打开全部都是无数据,而且控制台报错,但是新添加的数据是正常显示的。对比了原因之后发现,新的数据前端传给后端的格式&#…...

99 颜色分类

颜色分类 题解1 双指针题解2 单指针 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums ,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在…...

计算机视觉与深度学习 | 基于GPS/BDS多星座加权图因子优化的行人智能手机导航

===================================================== github:https://github.com/MichaelBeechan CSDN:https://blog.csdn.net/u011344545 ===================================================== 基于GPS/BDS多星座加权图因子优化的行人智能手机导航 1、引言2、相关工…...

低代码平台,业务开发的“银弹”

目录 一、为什么需要低代码平台 二、低代码平台的搭建能力 三、低代码其他能力 四、写在最后 随着互联网和信息技术的快速发展,各行各业都在积极拥抱数字化转型。在这个过程中,软件开发成为企业实现数字化转型的关键环节。然而,传统的软件开发…...

补偿 FIR 滤波器引入的延迟

补偿 FIR 滤波器引入的延迟 对信号进行滤波会引入延迟。这意味着相对于输入,输出信号在时间上有所偏移。此示例向您说明如何抵消这种影响。 有限冲激响应滤波器经常将所有频率分量延迟相同的时间量。这样,我们就很容易通过对信号进行时移处理来针对延迟…...

图数据库Neo4j详解

文章目录 第一章 图和Neo4j1.1 图数据库概念1.1.1 图论起源1.1.2 节点-关系及图1.1.3 图数据库1.1.4 图数据库分类1.1.4 图数据库应用场景1.1.5 与关系型数据库对比1.1.6 图数据库优势 1.2 Neo4j介绍1.2.1 Neo4j是什么1.2.2 Neo4j特点1.2.3 Neo4j的优势1.2.4 Neo4j的限制1.2.5 …...

系列一、Shiro概述

一、概述 Shiro是一款主流的Java安全框架,不依赖任何容器,可以运行在JavaSE 和 JavaEE项目中,它的主要作用是对访问系统的用户进行身份认证、授权、会话管理、加密等操作。 一句话:Shiro是一个用来解决安全管理的系统框架&#x…...

SpringCloudAlibaba——Sentinel

Sentinel也就是我们之前的Hystrix,而且比Hystrix功能更加的强大。Sentinel是分布式系统的流量防卫兵,以流量为切入点,从流量控制、流量路由、熔断降级等多个维度保护服务的稳定性。 Sentinel采用的是懒加载,这个接口被访问一次&a…...

Java编写简易rabbitmq生产者与消费者

一、前言 开发时经常与其它系统用rabbitmq对接&#xff0c;当需要自测时&#xff0c;还是自己写rabbitmq生产者、消费者自测方便些。 下面总结下不用框架、使用java编写简易rabbitmq的方法。 二、代码 1.导入jar包 (1)如果是maven&#xff0c;那就用 <dependency>&…...

3.0.3版vsftpd所支持的FTP命令

2023年11月9日&#xff0c;周四下午 ABOR&#xff1a;中止当前的数据连接。ACCT&#xff1a;提供用户帐户信息&#xff0c;通常用于特定的站点访问控制。ALLO&#xff1a;为服务器上的文件分配存储空间。APPE&#xff1a;将数据添加到现有的远程文件中。CDUP&#xff1a;将当前…...

OTA包添加自定义内容

起因 新开一条线&#xff0c;需要上传的OTA包里加点内容&#xff0c;好让后台校验它是否是当前这条线(短期最小改动)。 开整 之前看过ota包结构&#xff0c;整包和差分包里都有一个payload_properties.txt文件&#xff0c;所以最简单的就是给这个txt文件里追加点自定义内容&…...

Luatos Air700 改变BL0942串口波特率

LuatOs 改变模块串口波特率思路参照 luatos 改变AIR530串口波特率 BL0942默认串口波特率可以通过SCLK_BPS引脚接3.3V电源设置到9600bps 但如果调整到38400bps需要修改0x19寄存器 bl0942 v1.06版的特殊寄存器说明&#xff0c;注意早期版本特殊寄存器说明存在错误 完整代码 mai…...

不可忽视的国外服务器地址IP选择指南

​  在如今互联网高速发展的时代&#xff0c;海外服务器扮演着重要的角色。选择合适的国外服务器IP地址却是一项复杂而又关键的任务。本文将为您介绍一些不可忽视的国外服务器地址IP选择指南。 私有IP地址&#xff1a; 私有IP地址是指在局域网内使用的IP地址&#xff0c;用于…...

C语言 预处理详解

目录 1.预定义符号 2.#define 2.1#define 定义标识符 2.2#define 定义宏 2.3#define 替换规则 2.4#和## 2.4.1# 的作用 2.4.2## 的作用 2.5 带有副作用的宏参数 2.6宏和函数的对比 对比 **2.7内联函数 2.8命名约定 3.#undef **4.命令行定义 5.条件编译 常…...

c++ async 使用详解,创建异步任务的多种方法

c async 使用详解 std::async 头文件 #include <future>。 函数原型&#xff1a; template<class Function, class... Args> std::future<std::invoke_result_t<std::decay_t<Function>,std::decay_t<Args>...>>async(std::launch polic…...

万物皆数——用matlab求解二阶微分方程

一、背景 毕达哥拉斯的“万物皆数”哲学观点表达了一个理念&#xff0c;即宇宙万物都可以通过数学语言来描述&#xff0c;数是万物的本原。 勾股定理就是毕达哥拉斯提出&#xff0c;因此在西方勾股定理也被叫做毕达哥拉斯定理。 工科类的专业&#xff0c;越到后面越感觉到数学…...

jmeter接口自动化部署jenkins教程

首先&#xff0c;保证本地安装并部署了jenkins&#xff0c;jmeter&#xff0c;xslproc 我搭建的自动化测试框架是jmeterjenkinsxslproc ---注意&#xff1a;原理是&#xff0c;jmeter自生成的报告jtl文件&#xff0c;通过xslproc工具&#xff0c;再结合jmeter自带的模板修改&…...

前端js实现将数组对象组装成自己需要的属性,或者去掉对象中不必要的属性

前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 需求&#xff1a;前端js实现将数组对象组装成自己需要的属性&#xff0c;或者前端js实现去掉对象中不必要的属性 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、示例数组对象…...

MeterSphere 任意文件读取漏洞(CVE-2023-25814)

MeterSphere 任意文件读取漏洞&#xff08;CVE-2023-25814&#xff09; 免责声明漏洞描述漏洞影响漏洞危害网络测绘Fofa: title"MeterSphere" 漏洞复现1. 构造poc2. 发送数据包3. 查看文件 免责声明 仅用于技术交流,目的是向相关安全人员展示漏洞利用方式,以便更好地…...

设计模式-01-单例设计模式

经典的设计模式有23种&#xff0c;但是常用的设计模式一般情况下不会到一半&#xff0c;我们就针对一些常用的设计模式进行一些详细的讲解和分析&#xff0c;方便大家更加容易理解和使用设计模式。 1-为什么要使用单例 单例设计模式&#xff08;Singleton Design Pattern&…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...