前端字符串转数组对象实现方式-开发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 => {

})

  1. 接口返回的出参格式转化 "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

}

})

})

相关推荐
gnip5 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫6 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel7 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼7 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手11 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法11 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku11 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode11 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu11 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu11 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript