How to display particular row of Json Data in ionic 4

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.

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).

2 Likes

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:

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

And the items JSON can be modified like this:

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}]

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 (xm.name === rb.Mcname) {
      machine = xm;
      break;
    }
  }
  if (!machine) {
    machine = {
      name: rb.Mcname,
      left: {breaks: 0, items: []},
      right: {breaks: 0, items: []},
    };
    machines.push(machine);
  }
  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];
      }
    }
  }
}