AngularJS Question
Output the same values json
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..
]
How can they be grouped by the same values? I write on angular 2, but it is possible and on pure JS. (I know that there is a lodash library, but it was not possible to filter the data).
Conclusion:
[
{
"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",
}
]
Then for each group it is displayed on its own table.
Also the question, how to deduce correctly then? After all, if for each group (and there can be many of them) there will be an array, how to process the data in the view and display it in tables one by one?
<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>
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download