How to display particular rows from JSON data in Ionic 4

I have two JSON data given below:

userMcData:

[
   {
      "MACHINE_ID":4,
      "MCNAME":“RF21”
   },
   {
      "MACHINE_ID":5,
      "MCNAME":“RF22”
   },
   {
      "MACHINE_ID":6,
      "MCNAME":“RF23”
   }
]

userMcData JSON shows the Machine ID and Machine Name.

items:

[
   {
      "Mcname":“RF21”,
      "Side":"L",
      "Breaks":101,
      “1”:20,
      “2”:10,
      “3”:15,
      “4”:11,
      “5”:9,
      “6”:10,
      “7”:6,
      “8”:8,
      “9”:12,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   },
   {
      "Mcname":“RF21”,
      "Side":"R",
      "Breaks":94,
      “1”:18,
      “2”:11,
      “3”:11,
      “4”:3,
      “5”:11,
      “6”:18,
      “7”:10,
      “8”:5,
      “9”:7,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   },
   {
      "Mcname":“RF22”,
      "Side":"L",
      "Breaks":151,
      “1”:12,
      “2”:13,
      “3”:13,
      “4”:25,
      “5”:15,
      “6”:12,
      “7”:29,
      “8”:17,
      “9”:15,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   },
   {
      "Mcname":“RF22”,
      "Side":"R",
      "Breaks":316,
      “1”:51,
      “2”:27,
      “3”:23,
      “4”:26,
      “5”:28,
      “6”:57,
      “7”:39,
      “8”:41,
      “9”:24,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   },
   {
      "Mcname":“RF23”,
      "Side":"L",
      "Breaks":164,
      “1”:15,
      “2”:22,
      “3”:19,
      “4”:14,
      “5”:13,
      “6”:20,
      “7”:15,
      “8”:22,
      “9”:24,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   },
   {
      "Mcname":“RF23”,
      "Side":"R",
      "Breaks":0,
      “1”:0,
      “2”:0,
      “3”:0,
      “4”:0,
      “5”:0,
      “6”:0,
      “7”:0,
      “8”:0,
      “9”:0,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   }
]

items JSON shows the Machine ID,Side,and some more columns. In this JSON, each Machine must have 2 rows.

Both the JSON data are dynamic.

I want to show this data as given below:

I want to show the data as Cards for each Machine from userMcData JSON. In each card, I have to show the particular machine data from the items JSON. I have tried with pipe. And the above image is taken from modified items JSON.

code:

keys.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    return Object.keys(value);
  }
}

HTML Code:

<ion-card *ngFor="let machine of userMcData">
    <ion-card-header>
      <div>
          <span class="alignleft">{{machine.MCNAME}}</span>
        </div>
   </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row *ngFor="let item of items">
          <ion-col *ngFor="let list of item | keys">
            {{item[list]}}
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
</ion-card>

Solution

I used keyvalue pipe offered by the angular. By default it sorts the result by the key. So had to use a compare function to retain the original order.

So the HTML Code will look like -

<ion-card *ngFor="let machine of userMcData">
  <ion-card-header>
    <div>
      <span class="alignleft">{{machine.MCNAME}}</span>
    </div>
  </ion-card-header>
  <ion-card-content>
    <ion-grid>
      <ion-row *ngFor="let item of items">
        <ng-container *ngIf="item.Mcname === machine.MCNAME">
          <ng-container *ngFor="let list of item | keyvalue: originalOrder">
            <ng-container *ngIf="!(list.key === 'Mcname' ||
                                  list.key === 'Side' ||
                                  list.key === 'Breaks')">
              <ion-col>
                {{list.value}}
              </ion-col>
            </ng-container>
          </ng-container>
        </ng-container>
      </ion-row>
    </ion-grid>
  </ion-card-content>
</ion-card>

And add the compare function to the TS file -

originalOrder = (a: KeyValue<number, string>, b: KeyValue<number, string>): number => {
    return 0;
  }

Here is the Output -