Объединить результаты двух запросов GET в один итерируемый объект в Angular 8 / Typescript с помощью forkJoin

Question

Я использую forkJoin для получения результатов от двух отдельных конечных точек. Я могу перебрать результаты [0] и результаты [1], однако я не могу go уровень до значений. IE: Я не могу сделать результаты [0] .amiiboId, он всегда возвращает неопределенное значение, хотя, когда я смотрю на полный объект результатов [0], я вижу, что у него есть amiiboId (и все другие поля).

Я присваиваю результаты [0] свойству amiiboCollection, но мне нужно использовать поля из результатов [0] и результатов [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"
    },
    },
    ]

Я также открыт для других способов сделать это, или если есть «правильный» способ справиться с этим, я хотел бы узнать больше об этом .

Любая помощь очень ценится!

Спасибо, Трэвис У.

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

Определенно более чистым способом, я обновлю это позже с этим, как только я выясню это.

ОБНОВЛЕНИЕ:"Более чистым способом" для меня было изменение бэкэнда, чтобы справляться с большим количеством тяжелой работы. Я настроил свою модель так, чтобы она включала коллекцию (как объект), что в данном случае приводило к необходимости только следующего: В этом случае я чувствовал, что это работает лучше всего. Оригинальное решение все еще выше для тех, у кого нет возможности внести изменения в их бэкэнд.

Answer 2

Легко, когда вы добавляете атрибут к объекту, javascript создайте его, если не существует, чем код, подобный следующему:

const requests = request1;
requests.collections = request2;

коллекция атрибутов запросов объекта является массивом коллекции