How to display an array of object?

Ionic Framework ionic-v3
1

Im new in ionic for few weeks. Im really appreciate for any help you guys contribute.

I got an array of object. i already display it but it show [object Object],…
So how to display the object in array?

Thankyou guys!Capture

2

Hi, @amirarshad96
Can you please share your code here?

3

Use *ngFor to iterate over object array.

Ex: details contain Array

//TS
public details:any=[];
constructor(public navCtrl: NavController,public http: Http ,public navParams: NavParams) {
    this.http.get('url')
             .subscribe(res => {this.details = res.json(); });
}

//html
<div *ngFor="let item of details">
<p>{{item.property}}</p>
</div>
5

import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import { Observable } from ‘rxjs/Observable’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

@Component({
selector: ‘page-profile’,
templateUrl: ‘profile.html’,
})
export class ProfilePage {

result3 : any = ;
data: Observable;

constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
}

try() {

this.http.get("http://192.168.1.26/eperumahanapi/api/getaduan")
.map(res => res.json())
.subscribe((data:any) => {
 
  this.result3 = data;

}, error => {
  console.log(error);
});

}
}

6

Okay then now in HTML file you can write like this:

<div *ngFor="let key of result3">
    <p>{{key.ComplaintAddress}}</p>
   <p>{{key.ComplaintDate}}</p>
    <p>{{key.ComplaintName}}</p>
    <p>{{key.ComplaintIC}}</p>
    <p>{{key.ComplaintRefNo}}</p>
</div>

and this will display your array.
Hope it helps!!!

7

its work! Thankyou sir for helping me :grin:

1 Like
8

Welcome @amirarshad96 Please mark it as solution so, that it will be useful for other persons also.

9

Hi sir. Thankyou for the reply, your concept is also same as @addwebsolution . Really appreciate with ur helps

1 Like
10

Is there any chance of deleting specific objects from the array.