如何将含多个对象的JSON数据转为单个对象适配Vue折线图？

你可以通过对象合并的方式完成数据格式转换，以下是具体实现方案：

转换逻辑 #

你拿到的原始数据是由多个单属性对象组成的数组，只需要把所有单属性对象合并成一个总对象即可。有两种常用实现写法：

1. Object.assign + 展开运算符写法：

   // originData 就是接口返回的原始数组 [{"A": 400},{"B": 1597},{"C": 1567}]
   const transformedData = Object.assign({}, ...originData)
   

2. reduce遍历写法：

   const transformedData = originData.reduce((acc, cur) => Object.assign(acc, cur), {})
   

完整Vue实现代码 #

<template>
    <line-chart :data="Mydata" v-if="Mydata"></line-chart>
</template>

<script>
// 这里可替换为你实际使用的请求工具
import axios from 'axios'
export default {
    data () {
        return {
            Mydata: null
        }
    },
    created() {
        // 请求接口获取原始数据
        axios.get('你的实际接口地址').then(res => {
            // 执行格式转换后赋值给Mydata
            this.Mydata = Object.assign({}, ...res.data)
        })
    }  
}
</script>

逻辑说明 #

Object.assign 方法会将所有传入的源对象的可枚举属性复制到第一个参数的目标对象中，展开运算符...会把数组里的每个单属性对象拆成独立参数传入，就能一次性合并为符合组件要求的格式。如果数组里存在重复key，后面的对象属性会覆盖前面的，符合常规业务逻辑。

内容的提问来源于stack exchange，提问作者Cristian