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

问题描述：

后台管理系统，这次投产完线上出现了个问题！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
     }
   })
})