I'm having difficulty generating a table in Angular2 from JSON because I want to pivot the JSON data and cant build an interface for it (the method i normally use)
An extract of the JSON im using is below which I convert which
[
{
"ValueDate": "2017-04-26T14:16:00",
"AccountName": "CASHAUD",
"Holding": 318622.53
},
{
"ValueDate": "2017-04-26T14:16:00",
"AccountName": "CASHCAD",
"Holding": 7195
},
{
"ValueDate": "2017-04-26T14:16:00",
"AccountName": "CASHEUR",
"Holding": 5077.97
},
{
"ValueDate": "2017-04-26T14:16:00",
"AccountName": "CASHGBP",
"Holding": 19625
},
{
"ValueDate": "2017-04-26T14:16:00",
"AccountName": "CASHJPY",
"Holding": 16463
},
{
"ValueDate": "2017-04-26T14:16:00",
"AccountName": "CASHNZD",
"Holding": 601.56
},
{
"ValueDate": "2017-04-26T14:16:00",
"AccountName": "CASHSGD",
"Holding": 1000
},
{
"ValueDate": "2017-04-26T14:16:00",
"AccountName": "CASHUSD",
"Holding": 1716906.25
},
{
"ValueDate": "2017-04-27T14:16:00",
"AccountName": "CASHAUD",
"Holding": 318622.53
},
{
"ValueDate": "2017-04-27T14:16:00",
"AccountName": "CASHCAD",
"Holding": 7195
},
{
"ValueDate": "2017-04-27T14:16:00",
"AccountName": "CASHEUR",
"Holding": 5077.97
},
{
"ValueDate": "2017-04-27T14:16:00",
"AccountName": "CASHGBP",
"Holding": 19625
},
{
"ValueDate": "2017-04-27T14:16:00",
"AccountName": "CASHJPY",
"Holding": 16463
},
{
"ValueDate": "2017-04-27T14:16:00",
"AccountName": "CASHNZD",
"Holding": 601.56
},
{
"ValueDate": "2017-04-27T14:16:00",
"AccountName": "CASHSGD",
"Holding": 1000
},
{
"ValueDate": "2017-04-27T14:16:00",
"AccountName": "CASHUSD",
"Holding": 1720781.25
}
]
I used the following tutorial http://techbrij.com/convert-column-to-row-javascript-array-pivot to pivot the JSON array which results in an array of arrays
its not a bad result
headings are always at [i][0]
data is always at [i + 1][j]
Are there any ideas on a way I could loop through theses arrays to now create an object or another array which i could build a table from please?
Create a new array with three rows (representing ValueDate, AccountName and Holding values) and iterate over the original values:
source = [{...}, {...} ... ];
result = [[], [], []];
source.forEach((row, index) => {
result[0][index] = row.ValueDate;
result[1][index] = row.AccountName;
result[2][index] = row.Holding;
});
See the following Plunker example: https://plnkr.co/edit/15ZmVUxhEyPLTlDmHCLb?p=preview
you can integrate pivotTable.js with Angular2. It's quite easy. If you choose this option I could help you. Cheers.