可观察到对象数组的映射

Question

I have rest api which is returning me json array with data. On client side I use this code to create objects from request.

public getNews(): Observable<News[]> {

return this.http.get(this.baseUrl + '/news')
  .pipe(
    catchError(this.handleError('getNews', []))
  )
  .map(res => {
    let response: any = res;
    return response.map((item) => new News(item));
  });
}

Subscribing:

this.restProvider.getNews().subscribe((news: News[]) => {
  this.news = news;
});

But how can I resolve issue when response is not an array but only single element? Or response is wrong like for example unexpected data from API?

Currently in those situations my application is throwing this error:

response.map is not a function

Answer 1

The following peice of code should help you to handle errors:

this.restProvider.getNews().subscribe((news: News[]) => {
  this.news = news;
}, (err) => {
console.log(err);
});

You just need to add the error parameter in the subscribe function.

Now coming on to your first question : What if the response is a single object? -> The signature of the function will always force it to return an array. The error will be generated on the subscription side. A simple solution to this is to change the data type of response.

this.restProvider.getNews().subscribe((news:any) => {
  this.news = news;
});

Answer 2

Code, will always return array:

public getNews(): Observable<News[]> {

return this.http.get(this.baseUrl + '/news')
  .pipe(
    catchError(this.handleError('getNews', []))
  )
  .map(res => {
    if(Array.isArray(res)) {
       return res.map((item) => new News(item));
     } else {
       return [new News(res)];
     }
  });
}

Answer 3

When the response is either single object or an array, then it is obviously not consistent behavior and it complicates things. I assume that backend is not under your control.

You can check first the response type to determine if it is an Array or an Object. You can use Array.isArray() for it. Then if the response is not an array, you convert it, like this const res = [response]

From then on, the getNews() should always return an array