Merge two arrays different size

Ionic Framework ionic-v3
1

I have two arrays with different size and want to display the content with a grid and each array side by side in a column. In the picture I want to move the equipment. Whats the best way to merge the array to be able to do a proper loop?
image

2

use the grid --> add two columns and put rows in the columns

like:

row 
  - col (Services)
    - row
      - col (Warhousing)
    - row
      - col (Forwarding)
    ...
  - col (Equipment)
    - row
      - col (...)
    ...
3

But its two arrays different size and I want them side by side.

  <ion-row >
        <ion-col *ngFor="let service of data.services">
          <ion-row>
            <ion-col>
            {{service}}
            </ion-col>
          </ion-row>
        </ion-col>
        <ion-col *ngFor="let equipment of data.equipment">
          <ion-row>
            <ion-col>x
            {{equipment}}
            </ion-col>
          </ion-row>
        </ion-col>
      </ion-row>

produces
image

4

the two ng-for needs to be placed at the inner ion-row not ion-col

1 Like