Как использовать этот json с угловыми данными

Question

Это ответ моего сервера.

{ 
"status": "success", 
"data": [{ 
    "id": null, 
    "reportType": "Total Voucher Report", 
    "reportModule": "Vouchers", 
    "reportData": [{ 
     "id": "1", 
     "voucherPackId": "2", 
     "serialNumber": "0", 
     "status": "Free", 
     "isBlocked": "N", 
     "voucherPin": "0", 
     "buyDate": null, 
     "redeemDate": null, 
     "phoneNumber": null, 
     "statusCode": null, 
     "identifier": "MCM0007532", 
     "merchantName": "test1", 
     "voucherName": "fddf", 
     "expiryDate": "2016-02-24 00:00:00", 
     "dealCategory": "Hotels \u0026 Travel", 
     "shortDescription": "xvxv", 
     "voucherWorth": "33.00" 
    }, { 
     "id": "2", 
     "voucherPackId": "2", 
     "serialNumber": "0", 
     "status": "Free", 
     "isBlocked": "N", 
     "voucherPin": "0", 
     "buyDate": null, 
     "redeemDate": null, 
     "phoneNumber": null, 
     "statusCode": null, 
     "identifier": "MCM0007532", 
     "merchantName": "test1", 
     "voucherName": "fddf", 
     "expiryDate": "2016-02-24 00:00:00", 
     "dealCategory": "Hotels \u0026 Travel", 
     "shortDescription": "xvxv", 
     "voucherWorth": "33.00" 
    }, { 
     "id": "3", 
     "voucherPackId": "2", 
     "serialNumber": "0", 
     "status": "Free", 
     "isBlocked": "N", 
     "voucherPin": "0", 
     "buyDate": null, 
     "redeemDate": null, 
     "phoneNumber": null, 
     "statusCode": null, 
     "identifier": "MCM0007532", 
     "merchantName": "test1", 
     "voucherName": "fddf", 
     "expiryDate": "2016-02-24 00:00:00", 
     "dealCategory": "Hotels \u0026 Travel", 
     "shortDescription": "xvxv", 
     "voucherWorth": "33.00" 
    }] 
}], 
"message": null} 

Я использовал его как,

vm.dtOptions = DTOptionsBuilder 
     .newOptions() 
     .withOption('ajax', { 
      url: config.base_url + 'report/voucher?module=Vouchers&type=Total Voucher Report&merchant=1', 
      type: 'POST', 
      dataSrc: 'data.data[0].reportData[0]', 
     }) 
     .withOption('processing', true) 
     .withOption('serverSide', true) 
     .withBootstrap() 
     .withPaginationType('full_numbers'); 

Это говорит неверный ответ в формате JSON. Цените свою любезную помощь. Debug результат: http://debug.datatables.net/urizon

Answer 1

Если использовать анализатор ваш получите ошибку: SyntaxError: JSON.parse: конец данных после того, как значение свойства в объекте в строке 63 столбца 16 данных в формате JSON. Итак, да ваш JSON недействителен! Просто добавьте} в строку списка. Потому что все скобки должны быть закрыты.

Answer 2

Убедитесь, что ответ JSON имеет заголовок Content-Type: application/json, в противном случае он может не обрабатываться правильно.

Answer 3

Используйте следующее значение для опции dataSrc: data[0].reportData, как показано ниже. Также вам необходимо удалить serverSide и processing, так как ваши данные не имеют правильной структуры для режима обработки на стороне сервера.

Вам также необходимо определить структуру столбцов, так как вы используете массив объектов в качестве источника данных.

vm.dtOptions = DTOptionsBuilder 
     .newOptions() 
     .withOption('ajax', { 
      url: config.base_url + 'report/voucher?module=Vouchers&type=Total Voucher Report&merchant=1', 
      type: 'POST', 
      dataSrc: 'data[0].reportData' 
     }) 
     .withBootstrap() 
     .withPaginationType('full_numbers'); 

vm.dtColumns = [ 
    /* List data properties for each column in the table. */ 
    DTColumnBuilder.newColumn('id'), 
    DTColumnBuilder.newColumn('voucherPackId'), 
    DTColumnBuilder.newColumn('serialNumber'), 
    DTColumnBuilder.newColumn('status')   
];