I have been facing challenges with Angular while attempting to recreate a spreadsheet layout in HTML using ng-repeat. Despite extensive research, I have not found a solution.
My goal is to display data in a table format as shown below:
<table>
<tr>
<th>Account</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
</tr>
<tr>
<td>Sales</td>
<td>50</td>
<td>150</td>
<td>250</td>
<td>350</td>
<td>450</td>
</tr>
<tr>
<td>Variable Costs</td>
<td>150</td>
<td>250</td>
<td>150</th>
<td>150</td>
<td>250</td>
</tr>
</table>There are 3 key elements that I need to incorporate into the table.
While I can easily create the columns using ng-repeat, my JSON data structure looks like this:
["Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"]
and my Angular code snippet is shown below: Account Description {{value }}
I'm also able to generate the rows using another JSON array:
["Sales", "Variable Costs", "Advertising"]
<tr ng-repeat="(header, value) in tm1rows" >
<td>{{value }}</td>
However, I am struggling to populate the table cells with values corresponding to a specific Account and Month combination from the provided JSON:
Example JSON data:
[{
"account2": "Sales",
"month": "Jan",
"TM1CubeValue": 9090
},
{
"account2": "Variable Costs",
"month": "Jan",
"TM1CubeValue": null
},
{
"account2": "Sales",
"month": "Feb",
"TM1CubeValue": null
},
{
"account2": "Sales",
"month": "Feb",
"TM1CubeValue": 1999
},
{
"account2": "Variable Costs",
"month": "Feb",
"TM1CubeValue": 99
}
]
Any assistance on how to solve this issue would be highly appreciated.
I believe I have provided sufficient information, but I am willing to provide more details if necessary.
Cheers!