There is JSON in which there can be identical values "treaty_number", and there can be a lot of them.
[
{
"id": 1,
"treaty_number": "as32dd",
"name": "Name1",
"company": "Company1",
"beneficiary": "beneficiary1",
},
{
"id": 2,
"treaty_number": "cgs22t2",
"name": "Name2",
"company": "Company2",
"beneficiary": "beneficiary2",
},
{
"id": 3,
"treaty_number": "as32dd",
"name": "Name3",
"company": "Company3",
"beneficiary": "beneficiary3",
},
{
"id": 4,
"treaty_number": "ff2153",
"name": "Name4",
"company": "Company4",
"beneficiary": "beneficiary4",
},
{
"id": 5,
"treaty_number": "as32dd",
"name": "Name5",
"company": "Company5",
"beneficiary": "beneficiary5",
},
{
"id": 6,
"treaty_number": "cgs22t2",
"name": "Name6",
"company": "Company6",
"beneficiary": "beneficiary6",
},
{
"id": 7,
"treaty_number": "hg2545s",
"name": "Name7",
"company": "Company7",
"beneficiary": "beneficiary7",
},
etc..
]
[
{
"id": 1,
"treaty_number": "as32dd",
"name": "Name1",
"company": "Company1",
"beneficiary": "beneficiary1",
},
{
"id": 3,
"treaty_number": "as32dd",
"name": "Name3",
"company": "Company3",
"beneficiary": "beneficiary3",
},
{
"id": 5,
"treaty_number": "as32dd",
"name": "Name5",
"company": "Company5",
"beneficiary": "beneficiary5",
}
];
[
{
"id": 2,
"treaty_number": "cgs22t2",
"name": "Name2",
"company": "Company2",
"beneficiary": "beneficiary2",
},
{
"id": 6,
"treaty_number": "cgs22t2",
"name": "Name6",
"company": "Company6",
"beneficiary": "beneficiary6",
}
]
<div *ngFor="let product of result">
<table class="table table-striped table-header-rotated" style="background: #fff;">
<thead>
<tr>
<th></th>
<th class="rotate-45" *ngFor="let product of result; let i=index;">
<div><span>{{i+1}}</span></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="row-header">Treaty number №</td>
<td *ngFor="let product of result; let i=index;">
{product.treaty_number}}
</td>
</tr>
<tr>
<td class="row-header">Name</td>
<td *ngFor="let product of result; let i=index;">
{{product.name}}
</td>
</tr>
<tr>
<td class="row-header">Company</td>
<td *ngFor="let product of result; let i=index;">
{{product.company}}
</td>
</tr>
<tr>
<td class="row-header">Beneficiary</td>
<td *ngFor="let product of result; let i=index;">
{{product.beneficiary}}
</td>
</tr>
</tbody>
</table>
</div>
You can use underscore
or lodash
each
function and groupby
function to achieve your desired output.
var data = [{
"id": 1,
"treaty_number": "as32dd",
"name": "Name1",
"company": "Company1",
"beneficiary": "beneficiary1",
},
{
"id": 2,
"treaty_number": "cgs22t2",
"name": "Name2",
"company": "Company2",
"beneficiary": "beneficiary2",
},
{
"id": 3,
"treaty_number": "as32dd",
"name": "Name3",
"company": "Company3",
"beneficiary": "beneficiary3",
},
{
"id": 4,
"treaty_number": "ff2153",
"name": "Name4",
"company": "Company4",
"beneficiary": "beneficiary4",
},
{
"id": 5,
"treaty_number": "as32dd",
"name": "Name5",
"company": "Company5",
"beneficiary": "beneficiary5",
},
{
"id": 6,
"treaty_number": "cgs22t2",
"name": "Name6",
"company": "Company6",
"beneficiary": "beneficiary6",
},
{
"id": 7,
"treaty_number": "hg2545s",
"name": "Name7",
"company": "Company7",
"beneficiary": "beneficiary7",
}
]
var result = [];
_.each(_.groupBy(data, function(obj) {
return obj.treaty_number
}), function(i) {
result.push(i);
});
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>