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

}

})

})

相关推荐
2501_9262279418 分钟前
.Net程序员就业现状以及学习路线图(五)
学习·.net
小周同学@1 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok1 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
@AfeiyuO1 小时前
分类别柱状图(Vue3)
typescript·vue·echarts
一只小风华~1 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号1 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌2 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康3 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海3 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏3 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端