Array of Array

Ionic Framework
1

Hello, I´m beginner at Ionic and I´m doing an app.
I need 4 arrays in array and I have this code:

tudo = {

divisao: [],

figura: [],

tempo: [],

quantidade: []

}

And this give me a error, what I should do?

2

Can you post the error message (as text, not an image)?

3

I have a function for add data and I can add data but when I try to put this array in ion-card with *ngFor like:

<ion-card *ngFor="let x of tudo; let i = index">
      <ion-card-header>
         <ion-card-title>Parte {{i+1}}</ion-card-title>
     </ion-card-header>

    <ion-card-content>
       <ion-label>Divisão: {{x.divisao}}</ion-label><br>
       <ion-label>Figura: {{x.figura}}</ion-label><br>
       <ion-label>Tempo: {{x.tempo}}</ion-label><br>
       <ion-label>Quantidade: {{x.quantidade}}</ion-label><br>
   </ion-card-content>
</ion-card>

When I load page:
Error: Uncaught (in promise): Error: Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.
Error: Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.

4

As the error is telling you, tudo isn’t an array. It’s an object. I think your data is inside out.

tudo = {
  divisao: [],
  figura: [],
  tempo: [],
  quantidade: []
}

That’s a single object consisting of four totally unrelated arrays. There is no way to iterate across them for many reasons, not the least of which is that there’s no guarantee that they all have the same number of members. What I think you want is a single array of objects that each have four scalar properties:

// i don't speak portuguese, but do please create this interface type and name it something meaningful
interface Thingy {
  divisao: string;
  figura: string;
  tempo: string;
  quantitade: string;
}

tudo: Thingy[] = [
  {divisao: "a", figura: "b", tempo: "c", quantitade: "d"},
  {divisao: "e", figura: "f", tempo: "g", quantitade: "h"},
]

Now your template should be able to iterate tudo properly.

1 Like
6

And it´s possible push data for this?

7

Thanks for help!
I will leave here my code :

public tudo = [];

function(){
     this.tudo.push({

        'divisao': this.divisao,

        'figura': this.figura,

        'tempo': this.tempo,

        'quantidade': this.quantidade

   });
}