Ionic List from Object

Ionic Framework ionic-v3
1

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 = [
        'Adelaide',
        'Collingwood',
        'Essendon',
    ];
}
ionViewDidLoad() {
console.log('ionViewDidLoad ContactsPage');
this.findfn();
}
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-content>
  <ion-list>
        <ion-item *ngFor="let team of ladder; let i = index;">{{i+1}}. {{team}}</ion-item>
    </ion-list>
  </ion-content>

Thank you, much appreciated :wink:

2

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,

François

1 Like
3

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

4

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

5

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: