can't display subscribed data in angular 8

Question

i need to assign the subscribed data to a variable and display it in html but it always gives me "undefined"

i have tried to move the function to the constructor but always the same problem!

export class EspacePartenaireComponent implements OnInit {
    public result: any;
    constructor(private partenaireService: EspacePartenaireService) {
        this.getServices();
        console.log(this.result);
    }
    getServices() {
        this.partenaireService.myServices().subscribe(data => {
            this.result = data;
            console.log(data)
        });
    }
    ngOnInit() {}
}

the console.log inside subscribe shows the data but the one inside the constructor doesn't, i expect to see the data since i am assigning it to a global variable!

Although JavaScript is synchronous, you cannot expect that `this.getServices()` will set your `this.result` immediately after you call it regardless of here you are doing it. When you log `data`, do you have a value? If you log `this.result` right after you set it in your subscription, i bet you get a value :). — Andy Danger Gagne, Jul 22 '19 at 12:11
you will get the data only after the subscription , when you prints the data in constructor, the variable is not initialised yet, when the getservices functions gets the value, the data gets assigned to the variable — BLACKMAMBA, Jul 22 '19 at 12:14

score 0 · Answer 1 · answered Jul 22 '19 at 12:14

0

the console.log inside subscribe shows the data but the one inside the constructor doesn't, i expect to see the data since i am assigning it to a global variable!

Yes, and if a console.log is run after a value is assigned to result, it'll log it. However, your console.log inside the constructor is executed before the request is completed.

Nothing incorrect is happening here - a request is being sent, data is being retrieved and stored. Only in the constructor, you're trying to access it before you have it.

answered Jul 22 '19 at 12:14

mbojko

13,503
1
16
26

do you have a workaround for this? – Amine Maalfi Jul 22 '19 at 12:28
@AmineMaalfi there's no workaround because that's how it works. Check this out - https://stackoverflow.com/a/43055707/592831, i couldn't answer it any better. – Andy Danger Gagne Jul 22 '19 at 13:23

robert · Answer 2 · 2019-07-22T12:34:08.703

0

Try like this:

export class EspacePartenaireComponent implements OnInit {
  public result: any;

  constructor(
    private partenaireService: EspacePartenaireService
  ) {
  }

  getServices() {
    this.partenaireService.myServices()
      .subscribe(
        data => {
          console.log('got data', data); // <- add this line to verify data is received with some custom text before it
          this.result = data;
        }
      );
  }

  ngOnInit() {
    this.getServices();
  }
}

edited Jul 22 '19 at 12:34

answered Jul 22 '19 at 12:14

robert

5,742
7
28
37

still giving me undefined! – Amine Maalfi Jul 22 '19 at 12:18
Can you share your EspacePartenaireService? – robert Jul 22 '19 at 12:19
import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import {environment} from '../../environments/environment'; @Injectable({ providedIn: 'root' }) export class EspacePartenaireService { constructor(private http:HttpClient) { } myServices(){ var username = sessionStorage.getItem("username"); return this.http.get(environment.url + `/users/${username}/services`, {withCredentials: true }); } } – Amine Maalfi Jul 22 '19 at 12:20
@AmineMaalfi Great thank you. One final piece the component's html. Can share that too. – robert Jul 22 '19 at 12:23
the html is just {{this.result}} – Amine Maalfi Jul 22 '19 at 12:25
@AmineMaalfi I updated my answer please add this line to verify that you actually got some data from your backend: `console.log('got data', data);` Once that is done check in your developer tools console. You should see 'got data...' – robert Jul 22 '19 at 12:28

score 0 · Answer 3 · answered Jul 22 '19 at 12:18

The data is there but not at the time when you console log it. You can either do an If in the template

<ng-container *ngIf="result">
 ... /// Your html goes here
</ng-container>

Or, subscribe to it in the template

<ng-container *ngIf="(this.partenaireService.myServices() | async) as data">
 ... /// Your html goes here
</ng-container>

can't display subscribed data in angular 8

3 Answers3