Angular - 观察者地图未按预期工作

Question

I'm trying to fetch data from my backend, creating a class object for each item I get

 getRankingList(type: RankingListType, page: number) { let params = new HttpParams().set("pid", String(page)).set("limit", String(5)); return this.http.get(`http://127.0.0.1:3333/ranking/player/all`, { params }) .pipe( map(item => new RankingGuild(item['guild'], item['name'], item['country'], item['honor'], item['RawKey'])) ); }

The data I'm receiving from the backend looks like this:

[
  {
    "RawKey": "1",
    "honor": 0,
    "guild": "Test",
    "name": "test",
    "country": 1
  },
 {
    "RawKey": "2",
    "honor": 0,
    "guild": "Test2",
    "name": "test2",
    "country": 1
  }
]

But instead of iterating through the object, "item" is the object itself, meaning there is only one iteration returning the object that I had in the first place, rather than its entries. I've been searching for hours to find a solution, but it seems like this is the correct way to do it, not sure why it doesn't work.

Answer 1

This is because the RxJS map operator and JavaScript's Array.map() are 2 different things altogether. You should read up on their differences.

In short, the RxJS map operator allows you to apply a given project function to each value emitted by the source Observable, and emit the resulting values as an Observable. On the other hand, the Array.map() method merely creates a new array with the results of calling a provided function on every element in the calling array.

If you want to map the value returned by the response from the HTTP request, I believe this is what you should be doing instead.

getRankingList(type: RankingListType, page: number) {

  let params = new HttpParams().set("pid", String(page)).set("limit", String(5));

  return this.http.get(`http://127.0.0.1:3333/ranking/player/all`, { params })
    .pipe(
      map(response => response.map(item => new RankingGuild(item['guild'], item['name'], item['country'], item['honor'], item['RawKey'])))
    );
}

Then, on your component itself, you may subscribe to the method to return the actual values itself.

getRankingList.subscribe(res => {
  // do the rest
})

Answer 2

The rx map operator is not the array map operator. The array map transforms items in an array, the rx map transforms items in a stream, and the item in the stream in this case is an array. Do this:

return this.http.get(`http://127.0.0.1:3333/ranking/player/all`, { params })
  .pipe(
    map(items => items.map(item => new RankingGuild(item['guild'], item['name'], item['country'], item['honor'], item['RawKey'])))
  );

Use the array map inside your rx map .