Ionic List from Object

Please can you help me to display data from an object in a List.
My hard coded Test data works fine,
but as soon as I replace it with the dynamic object data (I receive from my cordova contacts plugin),
all list items become [object object] ?

export class ContactsPage {
ladder: any;
contactsfound = [];
search = false;
constructor(public navCtrl: NavController, public navParams: NavParams, private contacts: Contacts) {
//prepoulated with test data
this.ladder = [
ionViewDidLoad() {
console.log('ionViewDidLoad ContactsPage');
findfn() {
    let fields:ContactFieldType[] = ['name'];
    //Display Test data 
    this.ladder = this.contacts.find(fields);
    //Replace Test data with object property name received from cordova plugin contacts.find  
    this.contacts.find(['name'], {filter: "", multiple: true})
                 .then(data => {
                 this.ladder = data
        <ion-item *ngFor="let team of ladder; let i = index;">{{i+1}}. {{team}}</ion-item>

Thank you, much appreciated :wink:

Hi @altergothen,

By default, Ionic stores array (php style arrays) as objects. And it’s the main problem when starting to code with Ionic.

I suggest you read this, it will help you tremendously:

Have fun with Ionic,


1 Like

Thanks so much Francois!
Not knowing the structure returned by the cordova plugin. I used {{ladder | json}} (with the help of Paresh Gami) displayed the structure of the object so that I could see what I was working with. From that I was able to determine that the correct field name was ladder.displayName

This isn’t performant. Marshal json as little as possible, because it is expensive. Manipulating objects is much better.

Thanks for the tip.
The json was used once off purely to see what the structure of the object being returned by the cordova plugin.
Once the structure was established I was able to remove that line and work with the object. :wink: