将可观察的嵌套对象映射到另一个对象

Question

我正在尝试将 API 调用的响应映射到 Product 对象。我似乎找不到正确的方法。

响应的结构如下：

{
  "data": [
    {
      "id": 1,
      "name": "keyboard",
      "details": {
        "parent": 1,
        "price": 50,
        "other": "info"
      }
    },
    {
      "id": 2,
      "name": "mouse",
      "details": {
        "parent": 2,
        "other": "info",
        "price": 20
      }
    }
  ],
  "total-records": 2,
  "more": "something"
}

无法保证回复详细信息的顺序。（详细说明价格）。我试图将上面的对象映射到一个仅包含以下属性的新对象：

{
    "id": 1,
    "name": "keyboard",
    "price": 50
},
{
    "id": 2,
    "name": "mouse",
    "price": 20
}

我正在使用 Angular 和 Observables 来获取数据。现在我正在获取值，对其进行映射，并且可以仅获取详细信息或第一级对象属性，例如data.id或data.name。然而，获取价格等详细信息对我来说有点令人困惑。

我研究了很多关于 mergemap、flatmap、甚至 lodash 的知识，并花了无数个小时试图弄清楚，但我似乎找不到正确的方法。

我可以在地图组合中使用过滤器来实现此目的吗？任何信息都受到高度赞赏。

到目前为止，这是我的代码：

{
  "data": [
    {
      "id": 1,
      "name": "keyboard",
      "details": {
        "parent": 1,
        "price": 50,
        "other": "info"
      }
    },
    {
      "id": 2,
      "name": "mouse",
      "details": {
        "parent": 2,
        "other": "info",
        "price": 20
      }
    }
  ],
  "total-records": 2,
  "more": "something"
}

Answer 1

它不依赖于 RxJS，而是依赖于普通的旧 Javascript。

要将您的对象映射到您期望的对象，请尝试以下操作：

this.productService
  .get(url, httpOptions)
  .pipe(
    map((items: Response<Product>) => items
      .map(item => ({ id: item.id, name: item.name, price: item.details && item.details.price || '?' }))),
    tap(mappedItems => console.log(mappedItems))
  )
  .subscribe(mappedItems => this.header = mappedItems);

我还冒昧地稍微移动了代码以使其更清晰（例如，在订阅中而不是直接在地图中执行某些操作）。

这段代码的作用是映射 Observable，使其返回一组新的数据。

返回的新数据集也是一个映射，但是是实际数据的映射，而不是 Observable 的映射。

使用映射的数据，您现在可以将其应用到订阅中创建的标头。