I'm currently facing a challenge with displaying data on a table that I fetch from an external service. The issue lies in the fact that the data received from the service varies in terms of columns, sometimes there are 5 columns and other times there are 8. I'm unsure of how to handle this dynamically changing data structure when using ng-repeat. Using ng-grid doesn't seem like a viable solution either since I only need to display 10 rows, making it unnecessary overhead. Is there any Angular method that can help me achieve this? If not, what would be the best approach for handling this small, dynamic data.
Note: The column names will also be dynamic My code
<div ng-app='myApp' ng-controller="MainCtrl">
<div ng-repeat="prdElement in packageElement track by $index" class="package-grid">
<table class="hovertable">
<thead>
<tr>
<th>Line #</th>
<th>Quantity in Plt</th>
<th>Allready Packed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = 0">
<td>{{data.itemId}}</td>
<td>
{{data.quantity}}
</td>
<td>{{data.packed}}</td>
</tr>
</tbody>
</table>
</div>
angular.module('myApp', []).controller('MainCtrl', function ($scope) {
var counter = 0;
$scope.packageElement = [{
name: counter,
show: true,
Data: [{
name: 'item 1',
itemId: '284307',
quantity: '100',
packed: 0
}, {
name: 'item 2',
itemId: '284308',
quantity: '200',
packed: 0
}]
}];
});