Dynamic columns with angular datatables - angularjs

Question

So I try to generate columns in datatables based on response from api request.
$scope.getProductCustomFields = function() {
$scope.custom_fields_loading = true;
$scope.dtCustomFieldsInstance = {};
$scope.dtCustomFieldsOptions = DTOptionsBuilder.newOptions().withOption('order', []);
$scope.dtCustomFieldsOptions.withOption('ajax', {
headers: {'Authorization': 'Basic ' + $rootScope.globals.currentUser.api_token},
dataSrc: 'data',
url: API.returnUrl('/ecommerce/reports/get-product-custom-fields?' + $httpParamSerializer({product: $scope.product})),
type: 'GET'
})
.withOption('processing', true)
.withOption('serverSide', true)
.withPaginationType('full_numbers')
.withOption('createdRow', createdRow);
function createdRow(row, data, dataIndex) {
// Recompiling so we can bind Angular directive to the DT
$compile(angular.element(row).contents())($scope);
}
$scope.dtCustomFieldsColumns = [];
//Here I make another request to php within this function since I cannot actually use dataSrc: 'data' as array
ProductsReportsService.getProductCustomFields($scope.product).then(function (response) {
$scope.data = response.data.data;
angular.forEach($scope.data, function (value, key) {
$scope.dtCustomFieldsColumns.push(DTColumnBuilder.newColumn('value.value').withTitle(key).notSortable());
});
});
$scope.custom_fields_loading = false;
};
As you can see I make two requests, a ajax one whose data is not accessible and another one before which I have commented, that I use for my forEach.
data looks like this:
array:1 [
"test drop down" => array:2 [
0 => array:4 [
"id" => 1
"label" => "test drop down"
"value" => "test1"
"name" => "test drop down"
]
1 => array:4 [
"id" => 1
"label" => "test drop down"
"value" => "test2"
"name" => "test drop down"
]
]
So to put it simple what I try to accomplish is table that basically looks like this:
<table>
<thead>
<tr>
<th>test drop down</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1</td>
</tr>
<tr>
<td>test2</td>
</tr>
</tbody>
</table>
Right now my table only has the headers right but I have no data in table body.
<table>
<thead>
<tr>
<th>test drop down</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
Thank you for your time and help!

Answer 1

Not sure is this is what you're looking for, but displaying a table like that from given data set (assuming it's saved in $scope.dtCustomFieldsColumns) would be something like this:
<tbody>
<tr ng-repeat="column in dtCustomFieldsColumns.testdropdown">
<td>{{column.value}}</td>
</tr>
</tbody>
You should change test drop down key in your data set to something like testDropDown. That'll help you access columns directly. Good luck.