Как динамически заполнить таблицы значений на основе JSON в угловых данных?

я используюРадиально-DataTables, Мне нужно иметь возможность динамически создавать таблицу на основе данных, которые возвращаются. Другими словами, я не хочу указывать заголовки столбцов.

Пример:

Данные JSON:

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

Заголовки столбцов:

идентификатор, город, штат

Может кто-нибудь, пожалуйста, помогите с этим?

 Anthony05 авг. 2016 г., 13:45
Задание заголовков столбцов потрясающе.

Ответы на вопрос(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"
 },
 ...
 ]
 Met-u05 авг. 2016 г., 16:23
Это именно то, чего я пытаюсь избежать. Я не хочу указывать заголовки столбцов с помощью vm.dtColumns
Решение Вопроса

о не проблема, но у нас есть другой тип декларативной установки с угловыми dataTables, что усложняет разделение различных задач. Мы можем задержать заполнение данныхfromFnPromise, но не препятствует созданию экземпляра dataTable до того, как мы этого хотим. Я думаю, что нашел твердое решение:

Во-первых, чтобы избежать мгновенной инициализации, удалитеdatatable директива от разметки и дать<table> id вместо этого, т.е.

<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, я думаю, это был пример, и он не предназначен для работы с запятыми.

 davidkonrad18 янв. 2018 г., 14:29
@ Сана, Спасибо, что обратили внимание. Исправили планкр. Это не сработало, потому что автор Angular DataTables по какой-то причине решил построить AD для angular 2/4/5 поверх существующей ветки, поэтому любые ссылки без конкретной версии больше не работают :(
 Sana18 янв. 2018 г., 15:01
Любая идея, как это сделать с вложенными объектами JSON
 Sana18 янв. 2018 г., 13:28
Почему PLNKR не работает
 Met-u10 авг. 2016 г., 10:53
Спасибо! Это определенно имеет смысл. Я реализую решение на своей стороне и обновлю его как принятый ответ после этого. Еще раз спасибо!

я на самом деле нашел более простое в реализации и гораздо более простое (и более безопасное из-за неиспользования $ compile) решение.

Единственное изменение, которое необходимо внести в HTML, это добавлениеng-if:

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

То, что происходит, - то, что angular задержит создание этого узла доcolumnsReady имеет какое-либо значение. Так что теперь в вашем коде вы можете получить необходимые данные, а когда они у вас есть, вы можете просто установитьcolumnsReady вtrue и угловой сделает все остальное.

$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;
});
 Luke Becker26 янв. 2018 г., 23:37
отличное решение.

Ваш ответ на вопрос