Issue
I am creating dynamic table and need to group one id in multiple row and number list from 1 to 5..
Refer this image
I've no idea how code it to make it dynamic like this image bellow...
example json data
"wallTick": [{
"serialNo": "se01",
"v1": {
"valueA": 1.2,
"valueB": 1.2,
"valueC": 1.4,
"valueD": 1.5
},
"v2": {
"valueA": 1.6,
"valueB": 1.7,
"valueC": 1.8,
"valueD": 1.9
},
"v3": {
"valueA": 1.0,
"valueB": 2.1,
"valueC": 2.2,
"valueD": 2.3
},
"v4": {
"valueA": 2.4,
"valueB": 2.5,
"valueC": 2.6,
"valueD": 2.7
},
"v5": {
"valueA": 2.8,
"valueB": 2.9,
"valueC": 2.0,
"valueD": 3.0
},
"v6": {
"valueA": 3.1,
"valueB": 3.2,
"valueC": 3.3,
"valueD": 3.4
},
"v7": {
"valueA": 3.5,
"valueB": 3.6,
"valueC": 3.7,
"valueD": 3.8
},
"v8": {
"valueA": 3.9,
"valueB": 4.0,
"valueC": 4.1,
"valueD": 4.2
}
},
{
"serialNo": "se02",
"v1": {
"valueA": 1.2,
"valueB": 1.2,
"valueC": 1.4,
"valueD": 1.5
},
"v2": {
"valueA": 1.6,
"valueB": 1.7,
"valueC": 1.8,
"valueD": 1.9
},
"v3": {
"valueA": 1.0,
"valueB": 2.1,
"valueC": 2.2,
"valueD": 2.3
},
"v4": {
"valueA": 2.4,
"valueB": 2.5,
"valueC": 2.6,
"valueD": 2.7
},
"v5": {
"valueA": 2.8,
"valueB": 2.9,
"valueC": 2.0,
"valueD": 3.0
},
"v6": {
"valueA": 3.1,
"valueB": 3.2,
"valueC": 3.3,
"valueD": 3.4
},
"v7": {
"valueA": 3.5,
"valueB": 3.6,
"valueC": 3.7,
"valueD": 3.8
},
"v8": {
"valueA": 3.9,
"valueB": 4.0,
"valueC": 4.1,
"valueD": 4.2
}
}
]
HTML
<table role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr style="height: 10px;"></tr>
<tr>
<td style="width: 20px;"></td>
<td>
<div style="border: solid 0.6px #d6d5d5;min-height: 500px;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%">
<thead style="background-color:#f6f6f6;">
<tr style="height:40px;">
<th
style="text-align:center; font-family: arial;font-size: 16px;text-transform: uppercase;width: 200px;">
Serial No.
</th>
<th
style="text-align:center; font-family: arial;font-size: 16px;text-transform: uppercase;width: 200px;">
Number
</th>
<th
style="text-align:center; font-family: arial;font-size: 16px;text-transform: uppercase;width: 200px;">
A
</th>
<th
style="text-align:center; font-family: arial;font-size: 16px;text-transform: uppercase;width: 200px;">
B
</th>
<th
style="text-align:center; font-family: arial;font-size: 16px;text-transform: uppercase;width: 200px;">
C
</th>
<th
style="text-align:center; font-family: arial;font-size: 16px;text-transform: uppercase;width: 200px;">
D
</th>
</tr>
</thead>
<tbody>
<tr
style="text-align:center;" *ngFor="let item of wallTick; let i = index">
<td style="border-right:solid 0.6px #d6d5d5;height:40px;" >
{{item.serialNo}}
</td>
<td style="border-right:solid 0.6px #d6d5d5;height:40px;">
</td>
<ng-container [ngStyle]= " 'width: 100'" *ngIf="item.v1?.valueA !== null">
<tr>
<td style="border-right:solid 0.6px #d6d5d5;height:40px;" >
{{item.v1?.valueA}}-test
</td>
<td style="border-right:solid 0.6px #d6d5d5;height:40px;">
{{item.v1?.valueB}}
</td>
<td style="height: 40px;">{{item.v1?.valueC}}</td>
<td style="height: 40px;">{{item.v1?.valueD}}</td>
</tr>
</ng-container>
<ng-container *ngIf="item.v2?.valueA !== null">
<tr>
<td style="border-right:solid 0.6px #d6d5d5;height:40px;" >
{{item.v2?.valueA}}-test
</td>
<td style="border-right:solid 0.6px #d6d5d5;height:40px;">
{{item.v2?.valueB}}
</td>
<td style="height: 40px;">{{item.v2?.valueC}}</td>
<td style="height: 40px;">{{item.v2?.valueD}}</td>
</tr>
</ng-container>
</tr>
</tbody>
</table>
</div>
</td>
<td style="width: 20px;"></td>
</tr>
<tr style="height: 10px;"></tr>
</table>
Hopefully somebody can help me Thanks in advance
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Solution
Your best bet is create an array in the way
[
{serialNo:"se01",number:1,rowspan:5,valueA:222,valueB:222,valueC:222,valueD:222}
{serialNo:"se01",number:2,rowspan:0,valueA:222,valueB:222,valueC:222,valueD:222}
{serialNo:"se01",number:3,rowspan:0,valueA:222,valueB:222,valueC:222,valueD:222}
...
{serialNo:"se02",number:1,rowspan:5,valueA:222,valueB:222,valueC:222,valueD:222}
{serialNo:"se02",number:2,rowspan:0,valueA:222,valueB:222,valueC:222,valueD:222}
{serialNo:"se02",number:3,rowspan:0,valueA:222,valueB:222,valueC:222,valueD:222}
...
]
So you can iterate
<tr *ngFor="let item of array">
<td *ngIf="item.rowspan" [attr.rowspan]="item.rowspan">{{item.serialNo}}</td>
<td>{{item.number}}</td>
<td>{{item.valueA}}</td>
<td>{{item.valueB}}</td>
....
</tr>
Well, trasnform the data it's a bit complex. you can use reduce method of an array and iterate over the "keys" of the object,
transformData(wallTick:any)
{
return wallTick.reduce((a: any[], b: any) => {
const rows = Object.keys(b).length - 1;
Object.keys(b).forEach((key: string, index: number) => {
if (key != 'serialNo') {
const item = {
serialNo: b.serialNo,
rowspan: index == 1 ? rows : 0,
number: index,
valueA: b[key]['valueA'],
valueB: b[key]['valueB'],
valueC: b[key]['valueC'],
valueD: b[key]['valueD'],
};
a.push(item);
}
});
return a;
}, []);
}
Remember that reduce it's only a function that iterate over the array -each element of the array is in "b" and return "a" that is the "acumulator"
Answered By - Eliseo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.