Angular Ionic : Error trying to diff 'value'. Only arrays and iterables are allowed

Question

i tried to show list value, when i console log value of list that's exactly like i want, like this

unit value {id: 81, name: "3 BR Suite"}
unit value {id: 82, name: "3 BR Grande"}
unit value {id: 83, name: "Pool Villa"}
unit value {id: 84, name: "Penthouse"}

but when i tried, to show it in html, there is error "Error trying to diff 'Penthouse'. Only arrays and iterables are allowed"

this is my .ts code

private unitList: any = [];
  getUnit() {
    this.oppCtrl.token_promise.then(() => {
      this.oppCtrl.getUnitType(this.productID).subscribe(response => {
        response.forEach(data => {
          this.unitList = data;
          console.log("unit value", this.unitList);
        },);
      },
      (err) => {
        let error = err.json();
        this.globalService.toastInfo(error.message ? error.message : 'Failed, please check your internet connection...', 3000, 'bottom');
        console.log(err);
      })
    })
  }

this is my html code

 <ion-card *ngFor="let item of unitList" (click)="save(item.id, item.name)">
<ion-list>
   <button ion-item style="border-bottom: none !important; padding-bottom: 0px; padding-left: 10px;"> 
    <ion-grid no-padding>
      <ion-row>
        <ion-col text-left col-12>
          <p class="sourceList">{{item.name}}</p>
        </ion-col>
      </ion-row>
    </ion-grid>
   </button> 
</ion-list>

can you guys help me how to solve it? thank you soo much

Emilien · Accepted Answer · 2021-03-08 09:28:30Z

2

Try to remove the forEach on response. You're actually not using an array into the HTML template.

Let's try this :

this.oppCtrl.token_promise.then(() => {
  this.oppCtrl.getUnitType(this.productID).subscribe(response => {
    this.unitList = response;
    console.log("unit value", this.unitList);
  },
  (err) => {...})
})

Make your unitList property public : unitList: any = [];

Please note that at the beginning, unitList will be empty. So your HTML will display an empty list. Then, when the route will be rendered, you will be able to manage your data. Maybe you would prefer to use an Observable ?

answered Mar 8, 2021 at 9:28

Emilien

2,7534 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Ionic : Error trying to diff 'value'. Only arrays and iterables are allowed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related