如何使用RxJS重命名服务器响应中的对象键？

需求背景 #

服务器返回的响应数据结构如下：

{
  "transactionBusinessId": "280",
  "deviceId": "13",
  ...
  "chargeSessionLiveDataDto": [
    {
      "timeStamp": 1677851096,
      "value": 30.0
    },
    {
      "timeStamp": 1630704615,
      "value": 987654.0
    },
    ...
  ]
}

需要将chargeSessionLiveDataDto数组中每个对象的timeStamp重命名为x，value重命名为y，同时保留原数据的整体结构，且数组长度不固定。

实现方案 #

利用RxJS的map操作符转换响应数据，结合数组的map方法遍历处理数组元素：

import { map } from 'rxjs/operators';

// 假设apiResponse$是你的API请求返回的Observable
const transformedResponse$ = apiResponse$.pipe(
  map(response => ({
    // 保留原对象的所有字段
    ...response,
    // 处理目标数组，重命名字段
    chargeSessionLiveDataDto: response.chargeSessionLiveDataDto.map(item => ({
      x: item.timeStamp,
      y: item.value
    }))
  }))
);

代码说明 #

1. RxJS map操作符：用于转换Observable数据流中的每个响应对象，是RxJS处理数据转换的核心操作符。
2. 展开运算符...response：确保原响应中的所有其他字段（如transactionBusinessId、deviceId）都被保留，只修改需要调整的chargeSessionLiveDataDto字段。
3. 数组map方法：遍历chargeSessionLiveDataDto数组中的每一个元素，将每个对象的timeStamp映射为x，value映射为y，无论数组长度多少都能适配。

健壮性优化（可选） #

如果存在chargeSessionLiveDataDto字段可能为undefined或null的情况，可以添加空值判断，避免运行时错误：

const transformedResponse$ = apiResponse$.pipe(
  map(response => ({
    ...response,
    chargeSessionLiveDataDto: response.chargeSessionLiveDataDto?.map(item => ({
      x: item.timeStamp,
      y: item.value
    })) || []
  }))
);

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