I can't fetch data on ionic app page by HTTP API. data only showing in console but not showing in ionic app page on display. please help me to find out the error

Ionic Framework
1

I am having some problem on ionic. I am not able to display data on screen via http in ionic.
i only showing data on google console.

this is the code of the file.

home.page.html (home page code)*

users{{users}}

<ion-item *ngIf=“users”>
username{{users}}


home.page.ts (ts file code)*

import { Component } from ‘@angular/core’;
import { NavController } from ‘@ionic/angular’;
import { HttpClientModule } from ‘@angular/common/http’;
import { HttpClient } from ‘@angular/common/http’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage {

users: any=;

constructor(
public navctrl: NavController,
public httpclient: HttpClient,
public httpclientmodule: HttpClientModule
) {
this.getdata();
}
getdata() {
this.httpclient
.get(‘https://jsonplaceholder.typicode.com/users’)
.subscribe(
(data) => {
console.log(data);
this.users = [data];
},
(error) => {
console.log(error);
}
);
}
}

Output screen

http
http1425×787 102 KB

2

It looks like you’re not iterating through the data. Try something like this in your html.

<ion-list  *ngIf=“users”>
    <ion-item *ngFor="#item of users">
        Username: {{item.username}}
    </ion-item>
</ion-list>
1 Like
3

i already do this in my code but never working.

4

hi, this.users = [data]; ← something wrong with this line ? try remove ?

1 Like
5

if you want to access each element given that your objects are stored in an array … you can simply do to access the i element

users[i].key
example : users[0].username --> Bret

or remove → this.users = data