Ionviewdidload - how to show data in html list


#1

Hello,
I pulled some data out of a json file and that part is working. I can see that there is data when lookiing in the console of chrome. Now I want to show this data in a list on a page. When pull data from firebase i use let bla of blabla and I can show data but how does this work with the ionviewdidload?

ionViewDidLoad(){
        this.restProvider.getRemoteData();

#2

Hello,

the principale should the same. You hold (push) your data in an array or any iterateable object that is binded to your ngfor.

ionviewdidload is called at a point in your lifecycle. lifecycle is in that way interessting, because at each point different things happens or are avaiable.

If showing is not working, then share code.

Best regards, anna-liebt

Best reagards, anna-liebt


#3

Hi Anna,

I followed this tutorial

All is working fine but I dont understand then what I can do to show the data in the page.NGfor I can not use so far I understand to show ther data. I guess I have to do something in the ts file first and then show some on the page?


#4

have you retreived correctly your date into a variable on your .ts file?

Can you provide some code?


#5

This is my page.ts file

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { GooglePlus } from '@ionic-native/google-plus';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import firebase from 'firebase';
import { AuthProvider } from '../../providers/auth/auth';
import { RestProvider } from '../../providers/rest/rest';



@IonicPage()
@Component({
  selector: 'page-welcome',
  templateUrl: 'welcome.html',
	providers: [GooglePlus]
})
export class WelcomePage {
	remotedata: any;
	isLoggedIn:boolean = false;

  products: AngularFireList<any>;
	constructor(public navCtrl: NavController, public navParams: NavParams, public authProvider: AuthProvider, afDatabase: AngularFireDatabase, public restProvider: RestProvider) {	}

	ionViewDidLoad(){
        this.restProvider.getRemoteData();

}
}

And here the restprovider which connects the json

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

/*
  Generated class for the RestProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class RestProvider {
	
	

  constructor(public http: HttpClient) {
    console.log('Hello RestProvider Provider');
  }
	
	
 	getRemoteData(){
        this.http.get('http://headless.bla.nl/test2').map(res => res).subscribe(data => {
            console.log(data);
        });
    }
	
	
}

#6

You should insert your data into an array when you retrieve them from your api. Have you tried to do this?


#7

you mean I have to make an array outside the IONViewdidload? Or inside this, that is what I dont understand because why I make the Ionviewdidload otherwise?


#8

IONViewdidload means that your method it’s triggered when the component it’s created, nothing else.
You can check this link for more info about lyfecicle events in Ionic: https://ionicframework.com/docs/api/navigation/NavController/

If you wanna show you data into the html you should save your data into a structure, like an array.
So, where you have this.restProvider.getRemoteData(); you have to save what you obtained from getRemoteData() somewhere.

You should have something like (in your ts file):

mydata: Array<any> = new Array<any>();

....

ionViewDidLoad(){
this.restProvider.getRemoteData().subscribe(data => {
        for(let d of data){
          
          this.mydata.push(d);
        }
      });
}

So, in your array mydata will be the json data that you get from the api and you can use it to obtain the information that you want.
I don’t know how your json is, but for example, if in your json you have the field “name” you can retrieve it in your HTML like this:

<p *ngFor="let index of mydata>{{let.name}}</p>

This code means that you cicle for all the json data that you have in your mydata array, and for each item you retrieve the name field.

Hope this helped!


#9

Thanks :slight_smile: Now understand and will read the link you gave me…
For now I go to try with your example


#10

Let me know if it was helpfull :slight_smile:


#11

I let you know. Only see that the .subscribe part can not be recognised with json but go work on it. For now I can further with it.


#12

Why you say that .subscribe part can not be recognised with json? it gives you error in the code?


#13

True, the error is Cannot read property ‘subscribe’ of undefined. I use map and i have to change something in the code which uses map what I also did with the getRemoteData (.map(res => res).subscribe(data =>)

later today I go to check it out and will let you know :wink:


#14

Usually, when the error is “Cannot read property ‘subscribe’ of undefined” It may be that the json it’s empty, so always check if you retrieve the data correctly with the api :slight_smile:


#15

You are right, there is no visible data with the script. The URL I use is correct, there is data when I check it in the browser. So I have to find why there is nothing when the script before your script pulls data🤔


#16

Any function whose name starts with get should return something. getRemoteData() doesn’t seem to. If you enable noImplicitAny in your tsconfig.json, getRemoteData() as written would generate a build error because it has no declared return type. This will help you think about what you want it to return, which will probably be initially a frustrating experience because it can’t do what you want it to. This will lead you to understanding what it can return, and how to handle it from callers.


#17

I did a step by step search and when I did only

ionViewDidLoad(){
        this.restProvider.getRemoteData();

I see in console of Chrome an array with the data from the json location. When I do

ionViewDidLoad(){
this.restProvider.getRemoteData()
      .subscribe(data => {
        for(let d of data){
          
          this.producten.push(d);
        }
      loading.dismiss();
      });

I get the message TypeError: Cannot read property ‘subscribe’ of undefined

So there is data to show only it give this error

Also I hard copied this line

mydata: Array = new Array();

Can it be that I have to change that?


#18

Two reasons I don’t like this:

  • it’s majorly inefficient: you have a needless loop and lots of reallocations
  • it’s not idempotent. not necessarily a major issue if it’s only being done in ionViewDidLoad, but in general i like my provider calls to act independently of any others.

So I would instead recommend simply assigning to mydata instead of going through the looping and pushing.


#19

You mean this?

ionViewDidLoad(){
this.restProvider.getRemoteData()
      .subscribe(data => {
        this.producten.push();
        });
	}

#20

Or more like

ionViewDidLoad(){
this.mydata = this.restProvider.getRemoteData();
      
        }

None of them displays result on the page but also no error and looking in console of Chrome I see the Array, so there is info but not on the page as visible data.