i am getting this error "ERROR Error: Error trying to diff 'true'. Only arrays and iterables are allowed"

Question

Trying to display data from ts to Html template in angular but I am getting this error "ERROR Error: Error trying to diff 'true'. Only arrays and iterables are allowed"

I think it is telling me that the data that i am passing are not an array! if you guys have an idea of how to solve this your help will be appreciated

look at my code

public products: any =[];
  constructor(  public navCtrl: NavController, 
                public http: HttpClient, 
                public nativeHttp:HTTP, 
                public plt:Platform, 
                public loadingCtrl:LoadingController,
                public popoverCtrl: PopoverController
                ) {          
        this.getData();
  }

  async getData(){

    let loading = await this.loadingCtrl.create();
    await loading.present();
    this.http.get('https://gratisgospel.net/APIproducts').pipe(
        finalize(()=> loading.dismiss())
        )
        // .map(response => response.json().data)
        .subscribe(data => {
        console.log('native data',data); 
        this.products = JSON.stringify({data});
         // this.products = Array.of(this.products);
         // this.products = data;

        if (this.products=!'') {
            // code...
            console.log('data are available');

        }

    });

and in my HTML here is the file I want to display data using a loop

<ion-col offset="1" *ngFor="let product of products">
                    <div class="box">
                        <img class="" src="../assets/imgs/air-zoom-pegasus-36-tortoise-shell-womens-running-shoe-ksw5Hx.jpg">
                        <h2 class="ion-text-center">nike Air</h2>
                        <ion-grid>
                            <ion-row>
                                <ion-col offset="1">
                                    <ion-icon name="ios-pricetag" padding></ion-icon>$50
                                </ion-col>
                                <ion-col offset="1">
                                    detail                              
                               </ion-col>
                            </ion-row>
                         </ion-grid>
                        <div>

                        </div>
                    </div>
                </ion-col>

Is the data you're getting from the API an array? Console log the data and add that to your post. — R. Richards
Why is this in your code?: this.products = JSON.stringify({data});. It seems you're turning your array into an object and then a string. Perhaps it should just be: this.products = data;? — R. Richards

tinox tinox · Accepted Answer · 2020-04-10T15:46:25

Thank you guys From your Guidance I figured out how to solve my issue just, just created an array and pushed data was getting, and boom problem solved!

i am getting this error "ERROR Error: Error trying to diff 'true'. Only arrays and iterables are allowed"

2 Answers