CODEWITHSUNDEEP
angulartypescriptangular7angular-httpclient
TommyF
TommyF

Reputation: 343

Angular 7 Http response

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.

Upvotes: 0

Views: 4336

Answers (2)

nircraft
nircraft

Reputation: 8478

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

Upvotes: 3

ambs
ambs

Reputation: 487

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

Upvotes: 3

Related Questions