I have a JSON Data like below:
items=[{“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},{“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},{“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},{“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},{“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},{“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}]
I want to show like this below
![image]()
But only the first two rows data I can show from that. I want to show the remaining data in the second and third card.
I have used Pipe for this.
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);
}
}
This is my 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>
Kindly someone help. Thnaks in Advance.
WebView failed provisional navigation