Ionic 2/Angular 2 display array - arrays

Question

I have to do a mobile application for school and I choosed to use Ionic 2 for this.
I need to display the daily timetable/schedule. For this, I'm using our intranet's API which returns a json, for exemple :
{
"1": [],
"4": {
"matiere": "M4201",
"prof": "LANDRÉ Jérôme",
"salle": "H201",
"evaluation": "N",
"texte": null,
"commentaire": null,
"type": "td",
"fin": 7
},
"7": {
"matiere": "M4204",
"prof": "GOMMERY Patrice",
"salle": "H205",
"evaluation": "N",
"texte": null,
"commentaire": null,
"type": "tp",
"fin": 10
},
"13": {
"matiere": "",
"prof": "",
"salle": "****",
"evaluation": "N",
"texte": "PROJETS",
"commentaire": null,
"type": "CM",
"fin": 19
},
"16": [],
"19": [],
"22": []
}
I successfully retrieve this in my application, but I dont find how to display of list of this.
Here is my /home/home.ts script :
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Home } from '../../models/home';
import { HomeCours } from '../../providers/home-cours';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
cours: Home[]
constructor(public navCtrl: NavController, private HomeCours: HomeCours) {
HomeCours.load().subscribe(cours => {
console.log(cours)
})
}
}
My /models/home.ts :
/**
* Created by corentin on 17/03/2017.
*/
//récupère la liste des cours sur http://intranet.iut-troyes.univ-reims.fr/api/edtjour/< id de la personne qui consulte >
export interface Home {
matiere: string;
prof: string;
salle: string;
evaluation: string;
texte: string;
commentaire: string;
type: string;
fin: number;
}
My /providers/home-cours.ts
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import { Home } from '../models/home';
/*
Generated class for the HomeCours provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
#Injectable()
export class HomeCours {
coursApiUrl = 'https://api.corentincloss.fr/intranet/edt.php?id=';
constructor(public http: Http) {
console.log('Hello HomeCours Provider');
}
load(): Observable<Home[]> {
return this.http.get(`${this.coursApiUrl}closs006`).map(res => <Home[]>res.json());
}
}
and finally my home.html :
<ion-header>
<ion-navbar>
<ion-title>Mes cours</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Emploi du temps du jour.</h2>
<hr />
<ion-list>
<div ion-item *ngFor="let cour of cours">
<h2>{{ cour.matiere }}</h2>
</div>
</ion-list>
</ion-content>
I'm sure this is coming from the id ("1", "4", "7"...) but I don't find any way to search the datas in those arrays.
If you could help me please it would be great :D
Thank you :)

Answer 1

After you've obtained the data, you should assign it to a property in your class:
export class HomePage {
cours: Home[]
constructor(public navCtrl: NavController, private HomeCours: HomeCours) {
HomeCours.load().subscribe(cours => this.cours = cours);
}
}

Answer 2

You can't *ngFor object. You should make an array from object.
export class HomePage {
cours: Home[] = []
constructor(public navCtrl: NavController, private HomeCours: HomeCours) {
HomeCours.load().subscribe((data: any) => for (let key in data) this.cours.push({key: key, value: cours[key]}););
}
}

Answer 3

Finally found, I had to declare a new array named "cours".
Here is my cours.ts :
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { CoursService } from '../../providers/cours-service';
/*
Generated class for the Cours page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Component({
selector: 'page-cours',
templateUrl: 'cours.html',
providers: [CoursService]
})
export class CoursPage {
public cours: any;
public heures: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public coursService: CoursService) {
this.loadCours();
console.log(coursService);
}
loadCours(){
this.coursService.load()
.then(data => {
let cours = new Array();
for (let key in data) {
cours.push(data[key]);
}
this.cours = cours;
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad CoursPage');
}
}
And now it's perfectly working ! Thank you for your answers :)