Angular Array Assigned by Observable is Empty

Question

I'm currently learning Angular and need to get some data from a local server, however when I try to use the array in my code it seems to be empty, despite the fact that I can use the ngFor directive on it and it displays correctly.

I've hard-coded the following data:

// person-data.ts

export var PERSON_DATA = [
    {
        "vorname": "Adrian",
        "nachname": "Moos"
    },
    {
        "vorname": "Ferdinand",
        "nachname": "Hübner"
    }
];

This is the exact same data set which I would receive from my localhost(Spring). I'm using provided code to get that data into a table structure, which requires the data to be put into another array called addressData like this:

// person-list.component.ts

import {PERSON_DATA} from "./person-data";

addressData = [];

ngOnInit() {
    this.addressData = PERSON_DATA;
}

and finally I put it into the table structure with the ngFor directive, very easy

  <li *ngFor="let p of addressData">
    {{p.vorname}} - {{p.nachname}}
  </li>

But I don't want to use the hard-coded data, I want to use the data from the server, so this is what I do instead: in the ngOnInit function I use the provided PersonService to get all the data and put it into a separate array like so:

// person-list.component.ts

persons = [];
addressData = [];

constructor(private _personService: PersonsService) {
}

ngOnInit() {
  this._personService.getAll().subscribe(data => this.persons = data);
  this.addressData = this.persons;
}

Now what happens is that when I use the ngFor directive with the persons array it works, but when I use the addressData array it does not work.

// this works

<li *ngFor="let p of persons">
    {{p.vorname}} - {{p.nachname}}
</li>

But

// this does not work

<li *ngFor="let p of addressData">
    {{p.vorname}} - {{p.nachname}}
</li>

What am I missing here?

Why does not assign the data to the other array?

coder · Accepted Answer · 2018-07-12T08:26:55.323

2

You are assigning the this.addressData = this.persons; out side of the subscription. Its mean this.addressData = this.persons; is get executed first before the data comes from the this._personService.getAll() call. Since you need to assign this.addressData = this.persons; inside subscribe method like below

this._personService.getAll().subscribe(data => {
    this.persons = data;
    this.addressData = this.persons;
});

Hope this will helps you!

edited Jul 12 '18 at 08:26

answered Jul 12 '18 at 08:02

coder

8,346
16
39
53

2

You might want to explain to @Miger why he has to put it in the subscribe method. People learn better by getting an explanation than just copy-pasting code :) – Gijs Post Jul 12 '18 at 08:06
No it's okay I get how it works now, it doesn't really solve my problem but at least I know what to do now. Didn't realize I could put curly brackets around this statement, thanks a lot! – Miger Jul 12 '18 at 08:15
@Gijs Post thank you for your advice I updated my answer little bit of a explanation :) – coder Jul 12 '18 at 08:19
and @Miger glad to hear that :) – coder Jul 12 '18 at 08:20

Angular Array Assigned by Observable is Empty

1 Answers1