使用 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;

對象請求的屬性集合是一個集合數組