How to display particular row of Json Data in ionic 4

I have a JSON Data like below:


I want to show like this below


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.


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

  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">
              <span class="alignleft">{{machine.MCNAME}}</span>
            <ion-row *ngFor="let item of items">
              <ion-col *ngFor="let list of item | keys">

Kindly someone help. Thnaks in Advance.

I would suggest thinking and working backwards from how you want to present the data. Doing this with a pipe means that you can’t easily control how many times the work is done, so I would emphatically get rid of the pipe.

So given the general template structure you’ve provided, my initial guess for what I would want the data to look like would be something like this (I don’t know what these numbers actually represent, which is partially why I think avoiding generic names like item and data is so important). I also have no clue how you are reconciling the list of machines with the list of "item"s - I would suggest pushing this reorganization as far up the chain of command as possible: if you can alter whatever is creating this JSON to put it in a more easily-processed format, it is usually better to do that instead of doing this sort of activity in client code.

interface Machine {
  name: string;
  items: number[][];

So at some point, convert what you have into a Machine[], and your template should instantly become much cleaner (and more performant).


Thanks @rapropos for your reply. I am new to ionic and I don’t know how to handle this. Seriously I don’t know to use interface, which you have recommended. I will explain as much as possible.

The Machine listed had a separate JSON, which is given below:


And the items JSON can be modified like this:


I want to show the items JSON according to the Mcname from userMcData JSON . I think now you can understand what I am trying to do.

I forgot to mention this in the topic. Both the JSON data are dynamic. Kindly help. Thanks.

1 Like

Although I absolutely adore userMcData as a variable name, it’s not of much use to me here. And, to reiterate, I would definitely look to do this transformation closer to the source, but if you absolutely have to do it in JavaScript, I would suggest something like this:

interface MachineSide {
  breaks: number;
  items: number[];

interface Machine {
  name: string;
  left: MachineSide;
  right: MachineSide;

let raw = [ /* the thing you call 'items' */ ];

let machines: Machine[] = [];
for (let rb of raw) {
  let machine: Machine | undefined;
  for (let xm of machines) {
    if ( === rb.Mcname) {
      machine = xm;
  if (!machine) {
    machine = {
      name: rb.Mcname,
      left: {breaks: 0, items: []},
      right: {breaks: 0, items: []},
  let side: MachineSide;
  let sideSide = rb.Side.toLowerCase();
  if (sideSide === "l") {
    side = machine.left;
  } else if (sideSide === "r") {
    side = machine.right;
  if (!!side) {
    for (let k in rb) {
      if (k.toLowerCase() === "breaks") {
        side.breaks = rb[k];
      } else if (!isNaN(+k)) {
        side.items[+k - 1] = rb[k];