Angular 7 adding data to result of http request

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

}

Guido Dizioli · Accepted Answer · 2019-03-12 21:53:24Z

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

answered Mar 12, 2019 at 21:53

Guido Dizioli

2,3863 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michal · Accepted Answer · 2019-03-12 21:26:45Z

0

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

answered Mar 12, 2019 at 21:26

Michal

1313 bronze badges

Comments

Manuela · Accepted Answer · 2019-03-14 06:36:01Z

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

Collectives™ on Stack Overflow

Angular 7 adding data to result of http request

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related