How to dynamically populate JSON based table values ​​in datatable angular?

Question

I am using Angular-Datatables . I need to be able to dynamically create a table based on the returned data. In other words, I do not want to specify column headings.

Example:

Json data:

[
 {
  "id": "2",
  "city": "Baltimore",
  "state": "MD",
 },
 {
  "id": "5",
  "city": "Boston",
  "state": "MA",
 },
 {
  "id": "8",
  "city": "Malvern",
  "state": "PA",
 },
]

Column headings:

id, city, state

Can anyone help with this?

Answer 1

! jQuery dataTables , angular dataTables, . fromFnPromise, dataTable , . , :

-, , datatable <table> an id, i.e:

<table id="example" dt-options="dtOptions" dt-columns="dtColumns" />

, dtColumns dtOptions , , datatable $compile <table>, id:

$http({
  url: 'data.json'
}).success(function(data) {
  var sample = data[0], dtColumns = []

  //create columns based on first row in dataset
  for (var key in sample) dtColumns.push(
    DTColumnBuilder.newColumn(key).withTitle(key)
  )
  $scope.dtColumns = dtColumns

  //create options
  $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('data', data)
    .withOption('dataSrc', '')

  //initialize the dataTable
  angular.element('#example').attr('datatable', '')
  $compile(angular.element('#example'))($scope)
})

" "
→ http://plnkr.co/edit/TzBaaZ2Msd9WchfLDLkN?p=preview

---

NB: JSON, , .

Answer 2

, ( - ).

, html, - ng-if:

<table ng-if="columnsReady" datatable="" dt-options="dtOptions" dt-columns="dtColumns"/>

, angular node columnsReady . , , , columnsReady true angular .

$http({
  url: 'data.json'
}).success(function(data) {
  var sample = data[0], dtColumns = []

  //create columns based on first row in dataset
  for (var key in sample) dtColumns.push(
    DTColumnBuilder.newColumn(key).withTitle(key)
  )
  $scope.dtColumns = dtColumns

  //create options
  $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('data', data)
    .withOption('dataSrc', '')

  //initialize the dataTable
  $scope.columnsReady = true;
});

Answer 3

,

HTML

<div ng-controller="WithAjaxCtrl as showCase">
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>

JS

angular.module('showcase.withAjax',['datatables']).controller('WithAjaxCtrl', WithAjaxCtrl);

function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
    .withPaginationType('full_numbers');
vm.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID'),
    DTColumnBuilder.newColumn('city').withTitle('City'),
    DTColumnBuilder.newColumn('state').withTitle('State')
];

}

data.json

[{
"id": 860,
"city": "Superman",
"state": "Yoda"
}, {
"id": 870,
"city": "Foo",
"state": "Whateveryournameis"
}, {
"id": 590,
"city": "Toto",
"state": "Titi"
}, {
"id": 803,
"city": "Luke",
"state": "Kyle"
 },
 ...
 ]