Angular 7 将数据添加到 http 请求的结果

Question

I get an array of IDs (assetIDs) and using those IDs I want to ask for data. For each http request I'm receiving one or more datasets. I want to add the request ID to each dataset and then return the data.

Getting and returning the data works just fine, but I don't know how to add that assetID to the dataset.

When I do it like in the following code snippet, I only get the first dataset of each ID. (Of course...because of the [0]). But how can I iterate over all datasets?

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

I also tried the following, but I don't get any data when doing this:

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

Your second aproach seems fine. I believe the problem is that you are using the rxjs operator forkJoin .

As RXJS docs say, this operator emits value when

When all observables complete, emit the last emitted value from each.

You basically have 2 options, change operator forkJoin to zip

After all observables emit, emit values as an array

Or add the take(1) operator after the map on pipe . Take operator will complete the observable after 1 value is emmited, permitting forkJoin to emit its values

Answer 2

You can use map also on your result array. Something like this:

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

Thanks for your replies. I tried everything but I guess the problem was that I used "element" as index within the array. The following code now works just fine:

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