Mapping Observable to array of objects

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

lopezbertoni · Accepted Answer · 2022-01-13 16:45:37Z

9

The following piece 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;
});

edited Jan 13, 2022 at 16:45

lopezbertoni

3,6413 gold badges41 silver badges54 bronze badges

answered Apr 13, 2018 at 6:31

Prasheel

1,0207 silver badges23 bronze badges

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

Comments

Yerkon · Accepted Answer · 2018-04-12 10:23:03Z

4

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

answered Apr 12, 2018 at 10:23

Yerkon

4,8182 gold badges20 silver badges32 bronze badges

1 Comment

Paul Over a year ago

THIS!!! I had to add the check whether it was an Array or not to my code before it read my passed-through Array as the actual data instead of 'undefined'.

David Votrubec · Accepted Answer · 2018-04-12 09:02:25Z

2

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

answered Apr 12, 2018 at 9:02

David Votrubec

4,1843 gold badges35 silver badges46 bronze badges

Comments

Lorenzo Eccher · Accepted Answer · 2023-10-20 22:20:46Z

I am new right now in Angular and I was confusing using Angular Cli 16 an reading this answers since I found the current (2023) easy solution for doing it using HttpClient. It does the convertion to JSON by itself if json is retoruned, and also the convertion to the right object is easy done.

import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
import { MyObject } from './myobject';

export class ProductsService {

  constructor(private _http : HttpClient){ }
  
  readMyObjects(): Observable<MyObjects[]>{
    return this._http.get<MyObjects[]>("http://url/to/api/");          
  }
}

That's all

Here I found a simple tutorial and then, obviously, lots of post also on stackoverflow after I found the solution. Here one.

I hope you like it.

Collectives™ on Stack Overflow

Mapping Observable to array of objects

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related