Angular 7 將數據添加到 http 請求的結果

Question

我得到了一組 ID（資產 ID），並使用這些 ID 來獲取數據。 對於每個 http 請求，我都會收到一個或多個數據集。 我想將請求 ID 添加到每個數據集，然后返回數據。

獲取和返回數據工作正常，但我不知道如何將該資產 ID 添加到數據集。

當我像下面的代碼片段那樣做時，我只得到每個 ID 的第一個數據集。 （當然......因為[0]）。 但是如何迭代所有數據集？

getData(assetIds: Array<string>): Observable<any> {
  const data = assetIds.map(assetId => {
    // for each assetId
    const path = this.serverUrl + '?' + 'assetid=' + assetId;
    return this.httpClient.get(path).pipe(
      map((res: any[]) => {
        return {
          name: res[0].name,
          type: res[0].type,
          asset: assetId
        };
    }));
});

// return combined result of each assetId request
return forkJoin(data);
}

我還嘗試了以下操作，但是在執行此操作時我沒有得到任何數據：

getData(assetIds: Array<string>): Observable<any> {
 const data = assetIds.map(assetId => {
  // for each assetId
  const path = this.serverUrl + '?' + 'assetid=' + assetId;
  return this.httpClient.get(path).pipe(
    map((res: any[]) => {
      const resultArray = [];
      res.forEach(element => {
        const row = {
          name: res[element].name,
          type: res[element].type,
          asset: assetId
        };
        resultArray.push(row);
      });
      return resultArray;
    }));
});
// return combined result of each assetId request
return forkJoin(data);

}

Answer 1

你的第二個方法似乎很好。 我相信問題在於您使用的是rxjs運算符forkJoin 。

正如 RXJS 文檔所說，當

當所有 observable 完成后，從每個 observable 發出最后發出的值。

您基本上有 2 個選項，將操作符forkJoin更改為zip

在所有 observable 發出后，將值作為數組發出

或者在pipe上的map之后添加take(1)運算符。 Take 操作符將在發出 1 個值后完成 observable，允許forkJoin發出它的值

Answer 2

您也可以在結果數組上使用map 。 像這樣的東西：

const data = assetIds.map(assetId => {
    // for each assetId
    const path = this.serverUrl + '?' + 'assetid=' + assetId;
    return this.httpClient.get(path).pipe(
      map((res: any[]) => res.map(item => {
        return {
          name: item.name,
          type: item.type,
          asset: assetId
        }
      })));
  });

  // return combined result of each assetId request
  return forkJoin(data);
}

Answer 3

感謝您的回復。 我嘗試了所有方法，但我想問題是我使用“元素”作為數組中的索引。 下面的代碼現在工作得很好：

return this.httpClient.get(path)
  .pipe(
    map((datasets: AssetFilesTableItem[]) => {
      const result: AssetFilesTableItem[] = [];
      let i = 0;
      datasets.forEach(element => {
        const dataset: AssetFilesTableItem = {
          name: datasets[i].name,
          type: datasets[i].type,
          size: datasets[i].size,
          timestamp: datasets[i].timestamp,
          created: datasets[i].created,
          updated: datasets[i].updated,
          asset: assetId
        };
        result.push(dataset);
        i++;
      });

      return result;
    }));