Does Ionic2 RestApi Promise work only with arrays? - api

Question

I'm newbie in Ionic2 typescript angular2. I've developed an example app to get data from Rest API.
I've used a Page component which implements a Service Provider which provides all the data in a promise to an array like:
UserService.ts
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class UserService {
data: any;
constructor(private http: Http) {
this.data = null;
}
load() {
if (this.data) {
// already loaded data
return Promise.resolve(this.data);
}
// don't have the data yet
return new Promise(resolve => {
this.http.get('https://randomuser.me/api/?results=25')
.map(res => res.json())
.subscribe(data => {
this.data = data.results;
resolve(this.data);
});
});
}
}
HomePage.ts
import {Component} from '#angular/core';
import {NavController} from 'ionic-angular';
import {UserService} from '../../providers/user-service';
#Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
users: any[] = [];
constructor(
public navCtrl: NavController,
public userService: UserService
) {
this.userService.load()
.then(data => {
this.users = data;
}) ;
}
}
home.html
<ion-header>
<ion-navbar color="primary">
<ion-title>
Demo 103
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let user of users">
<ion-avatar item-left>
<img [src]="user.picture.medium">
</ion-avatar>
<h2>{{ user.name.first | uppercase }}</h2>
<p>{{ user.email }}</p>
</ion-item>
</ion-list>
</ion-content>
Now, in the template with ngFor, everything works perfectly. But the problem comes, when I try to get the details of one of them, instead of a list of users.
When I replace users: any[] = []; to user:any; I get an error saying the model is undefined.
It is like if I don't get an array. My template doesn't wait the promise in order to render the page. Can't I use promise with an object? Is it only for arrays?

Answer 1

You can you Promises with objects as well. But notice that while the template is rendering your object "user" is uninitialized, when you declare it like that:
user:any
That's why you get an error. You can prevent the error by adding "?" mark after variable in your template.
<ion-list>
<ion-item>
<ion-avatar item-left>
<img [src]="user?.picture.medium">
</ion-avatar>
<h2>{{ user?.name.first | uppercase }}</h2>
<p>{{ user?.email }}</p>
</ion-item>
</ion-list>

Answer 2

NOTE: Your template is already rendered even before the promise is resolved for API data. Which is correct behavior. The template gets refreshed again when the data is loaded.
At first when the data is not loaded and the template is already rendered without any data. Your *ngFor="let user of users" tries to check for any data and it does not find any. So, it works and renders nothing. As soon as API promise is resolved and you have data, it refreshes to render your template correctly.
Now, when you try to access user (after doing user:any) directly like this without ngFor or ngIf:
<ion-item>
<ion-avatar item-left>
<img [src]="user.picture.medium">
</ion-avatar>
<h2>{{ user.name.first | uppercase }}</h2>
<p>{{ user.email }}</p>
</ion-item>
user:any does not have any property named as picture, name, etc. at the moment (before promise is resolved). So, it cannot access any data. And so the error.
This is not related to if it is an object or an array issue. It is how you are handling it.
If you want to correct this behavior, use any if condition indicating "if the data is present".
E.g.
<ion-item *ngIf="user">
<ion-avatar item-left>
<img [src]="user.picture.medium">
</ion-avatar>
<h2>{{ user.name.first | uppercase }}</h2>
<p>{{ user.email }}</p>
</ion-item>
Also, I do not understand how you are accessing user.picture or any property for that matter, if your API results in an array. Isn't user[<index>].picture will be correct? (Again, you need to make sure that user has data with <index>).

Answer 3

Now I get it... I didn't realize that and didn't know even about the "?".
Thank u both!