Angular 7 Http response

Question

When in component I get a response from our Rest Api, but when I move the code over to a service it will not give a response with data.

This is the code in my component:

import { HttpClient } from '@angular/common/http';
nodes: any = [];
this.http.get('https://prokom-aimcms-dev.azurewebsites.net/api/contentapi/getall', {observe: 'response'})
          .subscribe(response => {
             this.nodes = response;
      });

This will give the response:

 {
  "headers": {
    "normalizedNames": {},
    "lazyUpdate": null,
    "lazyInit": null,
    "headers": {}
  },
  "status": 200,
  "statusText": "OK",
  "url": "someUrl",
  "ok": true,
  "type": 4,
  "body": [
    {
      "id": 1,
      "contentId": "59f37a5c-b209-4813-a11b-0d2e34ec5530",
      "created": "2019-02-05T08:49:00.207078",
      "modified": "2019-02-21T13:02:19.2983893",
      "title": "TEst",
      "published": null,
      "creator": null,
      "state": 0,
      "sortIndex": 0,
      "contentObject": null,
      "metaObject": null,
      "parameterObject": null,
      "version": 0,
      "language": "nb_no",
      "parentContent": "00000000-0000-0000-0000-000000000000",
      "relatedContents": [
        "aa8e9c90-adbb-4853-98b9-53e431e27c4b"
      ],
      "tags": [],
      "categories": []
    },
.......

But if I move this over to a service (somename.service.ts):

import { HttpClient } from '@angular/common/http';

public getAllNodes(): Observable<any> {
   return this.http.get('someURL', {observe: 'response'})
   .map(response => {
      return response;
});

}

And call it from the component (somename.component.ts)

this.nodes = this.aimService.getAllNodes().subscribe();

Then the response will be:

 {
  "closed": true,
  "_parent": null,
  "_parents": null,
  "_subscriptions": null,
  "syncErrorValue": null,
  "syncErrorThrown": false,
  "syncErrorThrowable": true,
  "isStopped": true,
  "_parentSubscription": null,
  "destination": {
    "closed": true,
    "_parent": null,
    "_parents": null,
    "_subscriptions": null,
    "syncErrorValue": null,
    "syncErrorThrown": false,
    "syncErrorThrowable": false,
    "isStopped": true,
    "_parentSubscription": null,
    "destination": {
      "closed": true
    },
    "_parentSubscriber": null,
    "_context": null
  }
} 

Anyone know why this is so? And how I can get the data from the service as well.

Answer 1

this.nodes = this.aimService.getAllNodes().subscribe();

What you're doing here is essentially assigning the value of the subscription to this.nodes

When you subscribe, you will be able to provide "callbacks", which is what you need to do, in order to access your data. As below:

this.aimService.getAllNodes().subscribe((data) =>
{
    // you'll see the expected data here
), (error) =>
{
    // if the request fails, this callback will be invoked
});

---

If you're new to Observables, and the realm of RXJS, I'd highly recommend going here

Answer 2

You should subscribe and assign the value coming from subscription:

this.aimService.getAllNodes().subscribe((response) => {

     this.node = response.data // or any value from the response object
 }, (err) => {
       console.log(error); // any error should be caught here
 });