How to view the json data in HTML page

Ionic Framework ionic-v3
1

I Need some HELP …!!!
I followed a tutorial on how to fetch json data from an api
i need to fetch and display the details in my html page

Find below the url i used for fetching data :- https://jsonplaceholder.typicode.com/users

code given in provider :

 getRemoteData()
  {
  	
	
	return this.http.get(https://jsonplaceholder.typicode.com/users').map(res => res.json());
    
  }

Code given in my typescript file of view page :-

public jobs:any;
  
  ionViewDidLoad()
  {
  		
		this.redditService.getRemoteData().subscribe(data => {
	
				
			 this.jobs = data;
			 console.log(this.jobs);
		});
  }

Am getting the json array printed in console. Now i need to print the array of objects in the html page

2

try this

this.jobs = [];

for(var i = 0; i < data.length; i++) {
		  			
   this.jobs.push(
     {
	job_id: data[i].id, 
	job_name: data[i].name,
	job_desc: data[i].desc
     }
  );
}

use an ion-item on your .html file like this

<ion-item *ngFor="let job of jobs">
	<h2>{{job.job_name}}</h2>
	<h3>Desc : {{job.job_desc}}</h3>
</ion-item>
3

I would use map() instead of that push loop.

4

Thanks @ralphskie for the help. It worked :slight_smile:

5

@emiljenson
no need for Iterator in typescript. try this on your .html file like this

<ion-list *ngIf="jobs">
  <ion-item *ngFor="let job of jobs">
	 <h2>{{job.name}}</h2>
	 <h3>{{job.desc}}</h3>
  </ion-item>
</ion-list>```