Ionic 5 and nested array

Ionic Framework Ionic Angular
1

Hi everybody,

I have a problem using a nested array in Ionic 5, I have to create it after retrieving data from my backend service.

I can correctly display the data, the hide/show works, but I have several problems:

  • when I change segment or hide the item divider, my value is reset to 1.
  • when I’m using “ngModel”, changing the value [0][0] change the value [1][0] too.
  • when I’m using “value” my array doesn’t change when I try to save it.

Here is the code

this.nestService.getMultiples(listParam)
  .subscribe((data) => {
       this.arrayOne = _.orderBy(data[0], ['Name'], ['asc']);
        this.arrayTwo = _.orderBy(data[1], ['Name'], ['asc']);

        this.arrayTwoModified = this.arrayTwo;
        this.arrayTwoModified.forEach(item => item.numberSelect = 1);

        this.arrayOneModified = this.arrayOne;
        this.arrayOneModified.map(i => {
          i.show = true;
          i.arrayTwoModified = this.arrayTwoModified;
        });     
  });

And this is the template

 <div *ngSwitchCase="'One'">
  <ion-item-group *ngFor="let arrayOne of arrayOneModified; let i= index">
    <ion-item-divider tappable (click)="arrayOne.show = !arrayOne.show" color="medium">
      <ion-label>{{arrayOne.Name}}</ion-label>
      <ion-icon slot="end" *ngIf="arrayOne.show" name="arrow-down-outline"></ion-icon>
      <ion-icon slot="end" *ngIf="!arrayOne.show" name="arrow-up-outline"></ion-icon>
    </ion-item-divider>
    <ion-list *ngIf="arrayOne.show" lines="full">
      <ion-item *ngFor="let arrayTwo of arrayOne.arrayTwoModified ; let j= index">
        <ion-label>{{arrayTwo.Name}} - {{i}} - {{j}}</ion-label>
        <ion-input class="right" type="number" min="0" [(ngModel)]="arrayTwo.numberSelect"></ion-input>
        <!-- <ion-input class="right" type="number" min="0" [(ngModel)]="arrayOneModified[i].arrayTwoModified[j].numberSelect"></ion-input> -->
        <!-- <ion-input class="right" type="number" min="0" [(value)]="arrayOneModified[i].arrayTwoModified[j].numberSelect"></ion-input> -->
      </ion-item>         
    </ion-list>
  </ion-item-group>
</div>

If anybody have an idea, it will be nice!
Thanks

2

Every iteration of this loop assigns the exact same thing to arrayTwoModified, so all of your arrayTwoModifieds alias the same object. That explains:

3

Thanks a lot for the answer. I understand now my problem, but how can I change this and create a nested array ? I’ve tried

              const arrayThreeModified = Object.assign([], this.arrayTwoModified);
              //const arrayFourModified = Object.assign({}, this.arrayTwoModified);
              i.show = true;
              //i.arrayTwoModified = this.arrayTwoModified;
              i.arrayTwoModified = arrayThreeModified;
              //i.arrayTwoModified = arrayFourModified;
              //i.arrayTwoModified = this.arrayTwoModified;

but it don’t works
I’ve also tried to add à trackBy condition in the ngFor loop

   <ion-item-group *ngFor="let arrayOne of arrayOneModified; let i= index; trackBy:trackByIndex;">

Without results…

Thanks