I am facing a minor issue with a table
Below is the table
<table>
<thead>
<th>Name</th>
<th ng-repeat="value in drilldownReport.columns">
{{ drilldownReport.columnNames[value] }}
</th>
</thead>
<tbody>
<tr ng-repeat="offer in drilldownReport.data">
<td>{{ offer.criteria.id }}</td>
<td ng-repeat="value in drilldownReport.columns">
{{ drilldownReport.fixDisplay(offer.overall[value]) }}
</td>
</tr>
<tr ng-repeat="offer in drilldownReport.childsNodes">
<td>{{ offer.criteria.id }}</td>
<td ng-repeat="value in drilldownReport.columns">
{{ offer.overall[value] }}
</td>
</tr>
</tbody>
</table>
The data is fetched from the controller as shown below
.then(function (data) {
vm.data = data;
vm.data.map(function(items) {
console.log(items.childs);
vm.childsNodes = items.childs;
});
}
where vm.data returns an array of objects like this
[
{
"type":"offer",
"criteria":{
"type":"offer_id",
"id":"55e8f8d43744b0cd38bfb6bd"
},
"overall":{
"cost_per_click":0,
"offer_price":0
},
"childs":[
{
"type":"offer",
"criteria":{
"type":"browser",
"id":"Firefox"
},
"overall":{
"cost_per_click":0,
"offer_price":0
},
"childs":[
...
]
},
{
"type":"offer",
"criteria":{
"type":"browser",
"id":"Chrome"
},
"overall":{
"cost_per_click":0,
"offer_price":0
},
"childs":[
...
]
}
]
}
]
The structure includes nested childs which replicate the parent node properties endlessly. Each object within childs can also have its own set of nested childs. The number of nested levels can vary, ranging from 1 to multiple.
Any suggestions on how to render this in the table effectively?
EDIT
In case you need information about the columns and columnNames
vm.columns = [
"offer_price",
"cost_per_click"
]
vm.columnNames = {
"offer_price": "Offer Price",
"cost_per_click": "CPC"
};
I came across this article which seems similar to my requirement, but I am unsure how to integrate it into my existing code.