Calling a function in the page constructor results in empty array

Question

I try to load and bind this.studentNames[i].checked to prepare checkboxes (key-value pair in localstorage if checkbox is set). However, after correctly pushing the entries from the storage in the this.studentNames array (I can see all of them as in the storage in the view), the this.studentNames array is then empty [] in the array and hence not longer accessable for the model.

Do I use this here in a wrong way? I thought, when I use =>functions, erverything should be ok?!

My view (HTML):

<ion-list>
  <ion-item *ngFor="let studentName of studentNames; let i=index">
    <ion-label>{{studentName.name}}</ion-label>
    <ion-checkbox [(ngModel)]="studentName.checked" (ionChange)="checkboxToggle($event,studentName)"></ion-checkbox>
  </ion-item>
</ion-list>

My model (TypeScript):

@mycomp...
selectedItem: any;
studentNames: Array<{id: string, name: string, checked: boolean}>;

constructor(private navParams: NavParams, public storage: Storage) {
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');
    this.studentNames = [];
    this.readStorageAtStartup();
    console.log(this.studentNames)
  }

  public readStorageAtStartup() {
    this.storage.ready().then(() => {
       this.storage.forEach( (value: string, key: string, index: number) => {
         if(key.charAt(0)=="S") {
           this.studentNames.push({id: key, name: value, checked: true})
         }
       })
    })
  }

Console.log() (Firefox):

Array [  ]

Thanks for your help!

The `readIsCheckedAtStartup();` call is commented, so in the posted code it's not being called at all (and thus, the `index2 ` is not being initialized)... I don't fully understand what the issue would be — sebaferreras, Apr 15 '17 at 08:47
@sebaferreras Thanks, that was for debugging, but when I remove the comment it sais this.studentNames undefined and index2 is hence -1... My problem is that (already in the first function) this.studentName is empty array [] in the model (please see the output above), but I can see the entries in the view. — Andi Anderle, Apr 15 '17 at 11:29
@sebaferreras I edited the question, so I hope it's much clearer now. — Andi Anderle, Apr 15 '17 at 12:02
`this.storage.ready()` is asynchronous, so you can't depend on `this.studentNames` being populated after the `readStorageAtStartup` call. See http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Heretic Monkey, Apr 17 '17 at 16:36
@MikeMcCaughan Many thanks, that's a load of input for me to check. :). So I think my question is relevant, could you please upvote if so? Sorry for asking but I don't want to get stuck. — Andi Anderle, Apr 17 '17 at 16:46

score 1 · Accepted Answer · answered Apr 17 '17 at 20:13

Pass the storage as a parameter into your readStorageAtStartup function and resolve the asynchronous request from there

public readStorageAtStartup(storage: Storage) {
storage.ready().then(() => {
   storage.forEach( (value: string, key: string, index: number) => {
     if(key.charAt(0)=="S") {
       this.studentNames.push({id: key, name: value, checked: true})
     }
   })
})

}

Calling a function in the page constructor results in empty array

1 Answers1