将两个 GET 请求的结果合并到单个 Iterable Object in Angular 8/ Typescript with forkJoin

Question

我正在使用 forkJoin 从两个不同的端点获取结果。我可以迭代 results[0] 和 results[1] 但是，我不能降低到值的级别。 IE：我不能做 results[0].amiiboId 它总是 return 未定义，即使当我查看 results[0] 的完整 object 我可以看到它有一个 amiiboId（和所有其他字段）。

我正在将 results[0] 分配给一个名为 amiiboCollection 的属性，但我需要在我的模板中同时使用 results[0] 和 results[1] 中的字段。有没有办法合并这两个 object 以便我的第二个响应是第一个响应的 child？示例如下：

let amiibo = this.amiiboService.getAllAmiibo();
    let collection = this.amiiboService.getCollection(this.userId);

    forkJoin([amiibo, collection]).subscribe(results => {
      // results[0] is amiibo
      // results[1] is collection
      (results[0] as any).collection = results[1];
      this.amiiboCollection = results[0];


      console.log(this.amiiboCollection);
    });

第一个终点将return:

[
{
    "amiiboId": 1,
    "series": {
        "seriesId": 1,
        "seriesName": "Super Smash Bros. series "
    },
    "name": "Mario",
    "imageUrl": "https://storage.googleapis.com/amiibo/9L3Onnk5QzEp9CY8FtCKu65GjBbwr05O.png",
    "naReleaseDate": "2014-11-21",
    "jpReleaseDate": null,
    "euReleaseDate": null,
    "auReleaseDate": null
},
{
    "amiiboId": 2,
    "series": {
        "seriesId": 1,
        "seriesName": "Super Smash Bros. series "
    },
    "name": "Donkey Kong ",
    "imageUrl": "https://storage.googleapis.com/amiibo/AO2t6rdJrmc6bn8ADwGC0v_IR1Y8Zju-.png",
    "naReleaseDate": "2014-11-21",
    "jpReleaseDate": null,
    "euReleaseDate": null,
    "auReleaseDate": null
}
]

而第二个终点将return:

{
    "collectionId": 55,
    "amiiboId": 1,
    "userId": 12,
    "collected": "Y",
    "quantity": null,
    "collectedInBox": null,
    "collectedInBoxQuantity": null,
    "favorited": null,
    "wishlisted": null,
    "addDate": "2020-01-09T23:17:45.734+0000",
    "modDate": "2020-01-09T23:17:45.735+0000"
},
{
    "collectionId": 59,
    "amiiboId": 2,
    "userId": 12,
    "collected": "N",
    "quantity": null,
    "collectedInBox": null,
    "collectedInBoxQuantity": null,
    "favorited": null,
    "wishlisted": null,
    "addDate": "2020-01-11T19:09:36.177+0000",
    "modDate": "2020-01-11T19:09:36.177+0000"
},

我想要这样的组合 object：

[
    {
    "amiiboId": 1,
    "series": {
        "seriesId": 1,
        "seriesName": "Super Smash Bros. series "
    },
    "name": "Mario",
    "imageUrl": "https://storage.googleapis.com/amiibo/9L3Onnk5QzEp9CY8FtCKu65GjBbwr05O.png",
    "naReleaseDate": "2014-11-21",
    "jpReleaseDate": null,
    "euReleaseDate": null,
    "auReleaseDate": null,
    "collection": {
        "collectionId": 55,
    "amiiboId": 1,
    "userId": 12,
    "collected": "Y",
    "quantity": null,
    "collectedInBox": null,
    "collectedInBoxQuantity": null,
    "favorited": null,
    "wishlisted": null,
    "addDate": "2020-01-09T23:17:45.734+0000",
    "modDate": "2020-01-09T23:17:45.735+0000"
    },
    },
    ]

我也对其他方式持开放态度，或者如果有 "right way" 来处理这个问题，我很乐意了解更多相关信息。

非常感谢任何帮助！

谢谢，特拉维斯 W.

Answer 1

这很容易，当您在对象上添加属性时 javascript 如果不存在则创建它，而不是像这样的代码：

const requests = request1;
requests.collections = request2;

对象请求的属性集合是集合数组

Answer 2

我找到了一种方法来处理我正在寻找的东西：（重要说明，我被 Typescript 类型不匹配错误搞砸了，但它们并没有阻止编译）。

  ngOnInit() {

    let amiiboRequest = this.amiiboService.getAllAmiibo();
    let collectionRequest = this.amiiboService.getCollection(this.userId);

    forkJoin([amiiboRequest, collectionRequest]).subscribe(results => {
      const amiiboResponse = results[0];
      const collectionResponse = results[1];

      this.amiiboCollection = [];

      let collected;
      amiiboResponse.forEach((amiibo) => {
        collectionResponse.forEach((collection) => {
          if (amiibo.amiiboId == collection.amiiboId) {
            collected = true;
            this.amiiboCollection.push({...amiibo, ...collection, collected});
          }
        });

        if (!collected) {
          this.amiiboCollection.push({...amiibo, collected});
        }

        collected = false;
      });

      console.log(this.amiiboCollection);
    });
  }

绝对是一种更简洁的方法，一旦我弄明白了，我会在稍后更新它。

更新： "cleaner way" 对我来说，是改变后端来处理很多繁重的工作。我将模型设置为包含 Collection（作为对象），在这种情况下，前端只需要以下内容：

amiiboCollection = [];

ngOnInit() {
    this.amiiboService.getAllAmiibo()
    .subscribe( results => {
      this.amiiboCollection = results;
    });
  }

这并不总是答案，但在这种情况下，我觉得它的效果最好。对于没有选项的人来说，原始解决方案仍然在上面，我不得不对他们的后端进行更改。

将两个 GET 请求的结果合并到单个 Iterable Object in Angular 8/ Typescript with forkJoin

Merge Results from Two GET Requests into Single Iterable Object in Angular 8/ Typescript with forkJoin

javascript

typescript

angular

angular7

angular8

第一个终点将return:

而第二个终点将return:

我想要这样的组合 object：