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

                }

        })

})