如何将服务端返回的带time字段的对象数组转换为UI库所需格式

数据老陈

2026-9-25

数据格式转换实现方案

转换逻辑

先提取原始数据中除time外的所有字段，将蛇形命名的字段转换为首字母大写的空格分隔格式，作为新对象的name值
针对每个字段遍历原始数据的所有条目，收集对应条目的time值和当前字段的数值，组成该字段对应的data数组

JavaScript 实现代码

function transformServerData(rawData) {
  // 过滤出除time外的所有业务字段
  const fieldList = Object.keys(rawData[0]).filter(key => key !== 'time');
  
  return fieldList.map(field => {
    return {
      // 字段名格式化：蛇形转友好显示名称
      name: field.split('_').map(item => item[0].toUpperCase() + item.slice(1)).join(' '),
      // 组装对应字段的时间+数值数组
      data: rawData.map(dataItem => ({
        time: dataItem.time,
        value: dataItem[field]
      }))
    }
  })
}

// 调用示例
const rawData = [
  {
    battery_charge: 0,
    battery_discharge: 0,
    consumption: 404,
    grid_backflow: 0,
    grid_consumption: 3,
    pv_generation: -7,
    time: "2019-02-25T00:00:00+00:00"
  },
  {
    battery_charge: 0,
    battery_discharge: 0,
    consumption: 404,
    grid_backflow: 0,
    grid_consumption: 3,
    pv_generation: -7,
    time: "2019-02-25T10:00:00+00:00"
  }
];

const formattedData = transformServerData(rawData);