How can I use the subscribe() method to obtain a single object from a GET call?

Question

I am building a web application with Angular that relies on REST services to extract data from a local MongoDB database.

Specifically, I have an input component that uses a service to execute GET calls to some REST services built with SpringBoot. Four of these use the subscribe method to fill up arrays of custom objects that are then displayed as options in four dropdown elements during the ngOnInit lifecycle event.

The format of the component method and its corresponding service method is posted below. Once the data is retrieved it is then assigned to an array property of the same data type.

Angular Component:

objectArray: Object[]

constructor(private service: Service) { }

getObjects() { this.service.getObjects().subscribe(objects => this.objectArray = objects) }

Angular Service:

constructor(private http: HttpClient) { }

getObjects(): Observable<Object[]> {
    return this.http.get<Object[]>(this.baseUrl + "object/list");
}

Where I am having trouble is implementing a GET call that looks for an object that returns a single object that matches a specific criterion.

I have tried implementing a method with the following format:

Angular Component

property: Object;

getObjectByAttribute(attribute: Attribute) {
    this.service.getObject(attribute).subscribe((object: Object) => this.property = object);
}

Angular Service

getObject(attribute: Attribute): Observable<Object> {
    return this.http.get<Object>(this.baseUrl + "object/attributetype/" + attribute)
}

Whenever I execute this method, however, I never get a response back from the GET call, but I feel confident that the REST services are not at fault as I have not encountered a problem executing the same GET call using Postman.

Answer 1

The first thing I would do to debug is update this,

property: Object;

getObjectByAttribute(attribute: Attribute) {
    this.service.getObject(attribute).subscribe((object: Object) => this.property = object);
}

To

property: any;

getObjectByAttribute(attribute: Attribute) {
    this.service.getObject(attribute).subscribe((object: any) => {
      this.property = object;
      console.log('Response => ', response);
    });
}

This is going to do a couple of things. First you are removing the assumption that the response is an Object and second you are going to log the full response to the console so that you can see what is actually returned.

If you are making the GET request correctly and receiving a valid 200 response with a payload then this will give you a sense of what that payload looks like. Then once you know how the response object is modeled you can remove the any and give it an actual type.

Also, in general, I would consider removing the subscription altogether and placing the observable returned from the API call directly in your template with an async pipe.