How to display particular rows from JSON data in Ionic 4 - json

Question

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>

Answer 1

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 -

Answer 2

You can try this below logic, structuring might change according to how you want to display:
<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 *ngIf="item.Mcname == machine.MCNAME">
<span *ngFor="let item_data in Object.keys(item)" *ngIf="item_data!='Mcname' && item_data!='Side' && item_data!='Breaks'">{{ item[item_data] }}></span>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>