Issue
So I have this JSON object:
[
{
"SysID": "4",
"Defect Classification": "Wrong Image Color",
"1": "3.0",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "5",
"Defect Classification": "Wrong Outer Liner Color",
"1": "3.0",
"2": "",
"3": "",
"4": "3.0",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "3.0",
"12": ""
},
{
"SysID": "6",
"Defect Classification": "Critical Print Misalignment",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "7",
"Defect Classification": ">15% Hole Placement Misalignment",
"1": "",
"2": "",
"3": "3.0",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "8",
"Defect Classification": "Delamination",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "9",
"Defect Classification": "Misaligned Lamination",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "10",
"Defect Classification": "Poor Gluetab adhesion",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "11",
"Defect Classification": "Skewing",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "12",
"Defect Classification": "Panel Overlapping",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
}
]
Now the object keys are not always the same. The numbers have a range from 1 to n
. How to display this dynamically in a table??
This is my code so far:
component.ts
criticalData: any[] = [];
tableHeader: any[] = [];
this.apiservice.loadPrintDetail(id).subscribe({
next: (data: any) => {
this.criticalData = data;
this.tableHeader = Object.keys(data[0]);
}
})
component.html
<table class="table table-bordered table-hover " id="criticalTable">
<thead>
<tr>
<th *ngFor="let item of tableHeader">{{item}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of criticalData; let idx = index">
<td *ngFor="let row of criticalData; let ix = index">{{item[ix]}}</td>
</tr>
</tbody>
</table>
As you can see the result is so wrong. How to correct this? The SysID
should be in the first column, Defect Classification
should be in the second and columns 1 to n
should be next. How to achieve this?
Solution
HTML.
<table class="table table-bordered table-hover " id="criticalTable">
<thead>
<tr>
<th *ngFor="let item of data[0] | keyvalue : keyDescOrder"> {{item.key}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data">
<td *ngFor="let item2 of item|keyvalue : keyDescOrder">
<div>
{{item2.value}}
</div>
</td>
</tr>
</tbody>
</table>
TS.
import { KeyValue } from '@angular/common';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example1',
templateUrl: './example1.component.html',
styleUrls: ['./example1.component.css']
})
export class Example1Component implements OnInit {
// Order by descending property key
constructor() { }
data: any = [
{
"SysID": "4",
"Defect Classification": "Wrong Image Color",
"1": "3.0",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "5",
"Defect Classification": "Wrong Outer Liner Color",
"1": "3.0",
"2": "",
"3": "",
"4": "3.0",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "3.0",
"12": ""
},
{
"SysID": "6",
"Defect Classification": "Critical Print Misalignment",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "7",
"Defect Classification": ">15% Hole Placement Misalignment",
"1": "",
"2": "",
"3": "3.0",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "8",
"Defect Classification": "Delamination",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "9",
"Defect Classification": "Misaligned Lamination",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "10",
"Defect Classification": "Poor Gluetab adhesion",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "11",
"Defect Classification": "Skewing",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
},
{
"SysID": "12",
"Defect Classification": "Panel Overlapping",
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
"6": "",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": ""
}
]
ngOnInit(): void {
// this.data = this.data.sort();
console.log(this.data);
}
keyDescOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
if(isNaN(a.key)){
return a.key > b.key ? -1 : (b.key > a.key ? 1 : 0);
}else{
return 1;
}
}
}
Answered By - mohit upadhyay
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.