js 中文属性和值的数据转换

今天服务端返回一个奇葩数据，类似下面这样：

const arr = [
      {
        '备注': 'a111',
        '当前状态': 'a222',
        '数据来源单位': 'a333'
      },
      {
        '备注': 'b111',
        '当前状态': 'b222',
        '数据来源单位': 'b333'
      },
      {
        '备注': 'c111',
        '当前状态': 'c222',
        '数据来源单位': 'c333'
      }
    ]

但是我们使用vue的v-for指令时没办法循环，所以需要处理一下上面的数据，下面我写一下方法

 created() {
    const arr = [
      {
        '备注': 'a111',
        '当前状态': 'a222',
        '数据来源单位': 'a333'
      },
      {
        '备注': 'b111',
        '当前状态': 'b222',
        '数据来源单位': 'b333'
      },
      {
        '备注': 'c111',
        '当前状态': 'c222',
        '数据来源单位': 'c333'
      }
    ]
    this.arr = this.getNewArr(arr)
},  
methods: {
    // 这里是child数组
    getChild(obj) {
      const resultArr = []
      Object.keys(obj).forEach((key, index, object) => {
        const tempObj = {}
        tempObj.name = key
        tempObj.value = obj[key]

        resultArr.push(tempObj)
      })

      return resultArr
    },
    getNewArr(arr) {
      const tempArr = []
      for (const i in arr) {
        const obj = arr[i]
        tempArr.push({
          child: this.getChild(obj)
        })
      }
      return tempArr
    }
  }

然后我们在模板里面这样去循环：

 <card v-for="(item,index) in arr" :key="index">
        <van-cell
          v-for="(child,cIndex) in item.child"
          :key="cIndex"
          :title="child.name"
          :value="child.value"
        />
 </card>