Loading JSON data gives undefined object in Angular 2 - asynchronous? - json

Question

...component.ts:
import { Component } from '#angular/core';
import { ValgteSkolerService } from '../valgteSkoler.service';
import { DatoService } from './datoer.service';
#Component({
selector: 'kalender',
providers: [DatoService],
templateUrl: 'app/kalendervisning/html/kalender.html'
})
export class KalenderComponent {
private valgteSkoleRuter: Array<any> = [];
public datoer: any[] = [];
constructor(private valgteSkolerService: ValgteSkolerService, private DatoService: DatoService) {
this.DatoService
.getDato()
.subscribe(datoer => { this.datoer = datoer; });
}
ngOnInit() {
this.valgteSkolerService.hentLagretData();
this.valgteSkoleRuter = this.valgteSkolerService.delteValgteSkoleRuter;
}
antallRuter: number = 0;
j: number = 0;
ukeEn(mnd: number, aar: number) :Cell[] {
var cells: Array<Cell> = [];
this.antallRuter = 0;
for (this.j = 1; this.j <= this.antallDager(mnd, aar); this.j++) {
var cell = new Cell;
console.log(this.datoer[this.j].dato);
cell.id = this.datoer[this.j].dato;
cell.text = this.j;
cells.push(cell);
this.antallRuter++;
this.j = this.j;
if (this.antallRuter % 7 == 0 && this.antallRuter != 0) {
break;
}
}
return cells;
}
class Cell {
id: string;
text: number;
}
...service.ts:
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import { Observable } from 'rxjs/Observable';
#Injectable()
export class DatoService {
dato: Array<any>;
constructor(private http: Http) {}
getDato() {
return this.http.request('app/kalendervisning/datoer.json')
.map(res => res.json());
}
}
...json:
{
"dato": "2016-08-01"
},
etc.
I am struggling with the cell.id = this.datoer[this.j].dato statement in the component.
I have checked the browser inspector, and it seems like the datoer array is undefined until the whole code has been run through several times. After a while, the array gets filled up. When I tested this with console.log, it prints 9 undefined objects, and then the actual data, but for some reason repeated 2 times also.
I think there might be a problem that the data is not loaded asynchronously, but I'm not sure.
Are there any ideas why it acts like this, and do you have a solution?

Answer 1

add constrctor code of calling API inside ngOnInit :
ngOnInit() {
this.DatoService
.getDato()
.subscribe(datoer => { this.datoer = datoer; });
this.valgteSkolerService.hentLagretData();
this.valgteSkoleRuter = this.valgteSkolerService.delteValgteSkoleRuter;
}