Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 48977

Angular ngFor not iterating through array on Android

$
0
0

Hello all,
First post, and pretty new user of ionic. So far I love it! My web app is working just dandy, but I’m running into an issue with android (haven’t gotten to iOS yet). I scoured the internet from corner to corner and couldn’t figure it out.

Here’s the rundown:
Retrieving an array of objects from my data api. The logs show everything to be returning as it should. I begin to have issues when trying to use an ngFor on either an ion-col (this is what I’m using for web) and even an ion-list. Basically android debugging is saying Error trying to diff, and that my array isn’t iterable. Here’s some code to see what’s going on.

page.ts file:

selection: Array<SelectionModel>=[];

getSelection() {
    if (this.platform.is('ios') || this.platform.is('android') || this.platform.is('mobile')) {
      this.httpMobile.get('https://www.asdf.com/' + this.config.endpoints.getSelection, {}, {})
        .then(data => {
          this.selection = data.data;
          console.log('selection: ' + this.selection);
          console.log(data.status);
          console.log(data.data); // data received by server
          console.log(data.headers);

        })
        .catch(error => {
          console.log(error.status);
          console.log(error.error); // error message as string
          console.log(error.headers);

        });
    } else {
      this.selectionService.getSelections('web').subscribe(
        x => {
          this.selection = x;
        },
        error => {
          console.log(error);
        },
        () => {
          // this.loadingScreen = false;
        }
      );
    }

html file:

<div *ngIf="ios || android">
        <ion-list *ngFor="let item of selection; index as i">
          test
          {{item.name}}
        </ion-list>

data returned from api:

[
	{
		"name": "Grey Goose",
		"description": "This is a description but short.",
		"size": "750ml",
		"price": 29.99,
		"content": 40,
		"brand": "Grey Goose",
		"country": "France",
		"state": null,
		"region": null,
		"inStock": true,
		"imageURL": "assets/spirits/vodka/greygoose.png",
		"typeId": 2,
		"categoryId": 1,
		"id": 1,
		"created": "2021-08-10T02:29:20.59",
		"lastModified": "0001-01-01T00:00:00"
	},
	{
		"name": "Absolut",
		"description": "This is a description but long. This is a description but long. This is a description but long.",
		"size": "750ml",
		"price": 19.99,
		"content": 40,
		"brand": "Absolut Vodka",
		"country": "Unites States",
		"state": "California",
		"region": null,
		"inStock": true,
		"imageURL": "assets/spirits/vodka/absolut.png",
		"typeId": 2,
		"categoryId": 1,
		"id": 2,
		"created": "2021-08-10T02:29:20.593",
		"lastModified": "0001-01-01T00:00:00"
	}
]

error in android studio:

Msg: ERROR Error: Error trying to diff '[{"name":"Grey Goose", ..<refer above for actual data>... }] Only arrays and iterables are allowed

My understanding is that the array returned is iterable. Am I just missing something here? Any help is appreciated!

1 post - 1 participant

Read full topic


Viewing all articles
Browse latest Browse all 48977

Trending Articles