使用 forkJoin 将两个 GET 请求的结果合并到 Angular 8/Typescript 中的单个可迭代对象中

Question

我正在使用 forkJoin 从两个单独的端点获取结果。 我可以迭代 results[0] 和 results[1] 但是，我不能深入到这些值。 IE：我不能做 results[0].amiiboId 它总是返回 undefined，即使当我查看 results[0] 的完整对象时，我可以看到它有一个 amiiboId（和所有其他字段）。

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

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);
    });

第一个终点将返回：

[
{
    "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
}
]

第二个端点将返回：

{
    "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"
},

我想要一个像这样的组合对象：

[
    {
    "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"
    },
    },
    ]

我也愿意接受其他方法来做到这一点，或者如果有“正确的方法”来处理这个问题，我很想了解更多。

任何帮助是极大的赞赏！

谢谢，特拉维斯 W。

Answer 1

我找到了一种方法来处理我正在寻找的内容：（重要提示，我被 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);
    });
  }

绝对是一种更干净的方式，我会在以后用它来更新它，一旦我弄清楚了。

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

amiiboCollection = [];

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

这并不总是答案，但在这种情况下，我觉得它效果最好。 对于没有选择我必须更改其后端的任何人，原始解决方案仍然高于此。

Answer 2

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

const requests = request1;
requests.collections = request2;

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