Error trying to diff '[object Object]'. Only arrays and iterables are allowed IONIC 4

Question

I receive the above mentioned error (title) when I try to load a list of ion-items. I would appreciate some help as I am very new to Ionic... Thank all of you for your time.

My ts page is the following:

array_dept0: any = [];

ionViewWillEnter(){
    this.storage.get('session_storage').then((res)=>{
      this.anggota = res;
      this.username = this.anggota.username;
      this.loadDept0(this.username);
    });

loadDept0(username){
    return new Promise(resolve => {
        let body = {
        aksi : 'getCompanyDept0',
        username : username
        };

        this.postPvdr.postData(body, 'proses-api.php').subscribe(data_dept0 => {
        this.array_dept0 = data_dept0;
        console.log('My data_dept0',data_dept0)
        resolve(true);
        });
    });
  }

proses-api.php

elseif($postjson['aksi']=='getCompanyDept0'){
    $data = array();
    $query = mysqli_query($mysqli, "SELECT * FROM master_user WHERE username = '$postjson[username]' ORDER BY user_id DESC LIMIT 1");

    while($row = mysqli_fetch_array($query)){

      $company_id = $row['company_id'];

      $query2 = mysqli_query($mysqli, "SELECT * FROM company_dept0 WHERE company_id = '$company_id' ORDER BY company_id DESC");
      
      while($row2 = mysqli_fetch_row($query2)){

        $row_array['company_dept0'] = $row2['name'];

      }
      
    }

    if($query) $result = json_encode(array('success'=>true, 'array_dept0'=>$row_array));
    else $result = json_encode(array('success'=>false));

    echo $result;

  }

console.log shows the following:

My data_dept0 {success: true, array_dept0: Array(5)}
array_dept0: Array(5)
0: {company_dept0: "Educación Infantil"}
1: {company_dept0: "Educación Primaria"}
2: {company_dept0: "Educación Secundaria (ESO)"}
3: {company_dept0: "Bachillerato"}
4: {company_dept0: "Personal del centro"}

Finally, the html:

<ion-list>
      <ion-item *ngFor="let item of array_dept0"> {{item.company_dept0}} </ion-item>
</ion-list>

Answer 1

The array_dept0 is actually a property inside the data_dept0 object. You need to assign the variable the array_dept0 array instead of the data_dept0 object.

this.postPvdr.postData(body, 'proses-api.php').subscribe(data_dept0 => {
  this.array_dept0 = data_dept0['array_dept0'];      // <-- access property here
  console.log('My data_dept0',data_dept0)
  resolve(true);
});

---

Besides, converting a Promise to an Observable using RxJS from is subjectively easier than converting the observable to a promise. Try the following

ionViewWillEnter() {
  from(this.storage.get('session_storage')).pipe(
    switchMap(res => {                           // <-- switch from one observable to another
      this.anggota = res;
      this.username = this.anggota.username;
      return this.loadDept0(this.username);      // <-- map the the HTTP request
    })
  ).subscribe(
    array_dept0 => { this.array_dept0 = array_dept0 },
    error => { }
  );
});

loadDept0(username): Observable<any> {
  let body = {
    aksi : 'getCompanyDept0',
    username : username
  };

  return this.postPvdr.postData(body, 'proses-api.php').pipe(   // <-- return the observable
    map(data_dept0 => return data_dept0['array_dept0'])         // <-- map to the `array_dept0` property
  );
}

I am using RxJS switchMap operator to switch from one observable to another and map operator to map the output from one form to another.