Ionic 5 and nested array

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

  .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; => {
 = 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)=" = !" color="medium">
      <ion-icon slot="end" *ngIf="" name="arrow-down-outline"></ion-icon>
      <ion-icon slot="end" *ngIf="!" name="arrow-up-outline"></ion-icon>
    <ion-list *ngIf="" 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> -->

If anybody have an idea, it will be nice!

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

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);
     = 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…