Angular 2+ return variable or map from http request

Question

I have a service in which it either stores an object so I can access it in other components or requests data from a web api and returns it in a map.

Example get for the objectService

get(): any {
    if (this.object == undefined || this.object == null) {
        return this.http.get(this.baseUrl + "/companies/get)
            .map((data: any) => {
                this.object = data;
                return this.object;
            });
    } else {
        return this.object;
    }
}

Using the service to set page title

ngOnInit() {
    this.objectService.get().subscribe((data: any) => {
        this.title.setTitle(data.name);
    });
}

So this works when I first load the page, but upon navigating to the page without a reload I get the following error ...subscribe is not a function. Which makes sense since I am returning an object and not an http request.

So I tried to return just the object and not a http request.

Example get for the objectService

get(): any {
    if (this.object == undefined || this.object == null) {
        return this.http.get(this.baseUrl + "/companies/get)
            .map((data: any) => {
                this.object = data;
            });
    }
    return this.object;
}

Using the service to set page title

ngOnInit() {
    this.title.setTitle(this.objectService.get().name);
}

This now flips the issue where page refresh gives me an error saying this.objectService.get().name is undefined and when I navigate to my component without a page refresh it works just fine.

Any help on trying to get this to work would be appreciated. Thanks in advance!

convert the normal object to an observable by Observable.of('this.object') — Aniruddha Das
– Aniruddha Das, Commented Sep 28, 2017 at 18:32

Aniruddha Das · Accepted Answer · 2017-09-28 19:44:00Z

1

Actually you are mixing the observable and normal object!

I would say stick to the first aproach but while returning just the object, convert it to an observable so that it will work in your onNgInit

So your service will

get(): Observable<any> {
    if (this.object == undefined || this.object == null) {
        return this.http.get(this.baseUrl + "/companies/get)
            .map((data: any) => {
                this.object = data;
                return this.object;
            });
    } else {
        return Observable.of(this.object);
    }
}

And your consumption will be still the normal and work for both the cases.

ngOnInit() {
    this.objectService.get().subscribe(
      (data: any) => {  // this for response data
        this.title.setTitle(data.name);
      },
      (error: any) => {  // this for error
        console.log('error: %o', error);
      },
   );
}

edited Sep 28, 2017 at 19:44

answered Sep 28, 2017 at 18:30

Aniruddha Das

21.8k27 gold badges104 silver badges135 bronze badges

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

3 Comments

David Lee Over a year ago

Lets say the http request returns 404. How would I detect this in my ngOnInit function?

David Lee Over a year ago

Nvm figured it out, I set a catch after the map in the service and I am able to return the error and check for it when I consume the service.

Aniruddha Das Over a year ago

you can also do it in component end by passing the second function to subscribe.

Collectives™ on Stack Overflow

Angular 2+ return variable or map from http request

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related