How to use this json with angular datatables

Question

This is my server response.

{
"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}

I used it as,

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');

It says invalid JSON response. Appreciate your kindly help. Debug result: http://debug.datatables.net/urizon

• Namal: Here is the debugger result. debug.datatables.net/urizon

Answer 1

Use the following value for dataSrc option: data[0].reportData as shown below. Also you need to remove serverSide and processing options since your data doesn't have correct structure for server-side processing mode.

You also need to define columns structure since you're using array of objects as your data source.

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') 
];

• davidkonrad: Yes - though, the "by the book" angular dataTables notation would be .fromSource(config.base_url + 'report/voucher?module=Vouchers&type=Total Voucher Report&merchant=1').withDataProp('data[0].reportData');
• Gyrocode.com: @davidkonrad, Thanks for the note. Seems like both could be used, see server-side processing example, especially when OP wants to use POST method.
• davidkonrad: Yes, they are just shorthands for .withOption('ajax' etc - no problem with your suggestion at all. I am not sure OP actually wants to use type: 'POST', how would it ever be of any use in this setup? Most of the times type: 'POST' seems to be a result of copy paste / cargo cult programming - not in there for any reason.
• Gyrocode.com: @davidkonrad, I agree. But you never know what server-side requirements are, sometimes you need to use POST indeed.

Answer 2

If your use a parser your will get error : SyntaxError: JSON.parse: end of data after property value in object at line 63 column 16 of the JSON data. So yes your JSON is invalid ! Just add } on list line. Because every brackets need to be closed.

Answer 3

Make sure the JSON response has Content-Type: application/json header, otherwise it might not be parsed correctly.

• Namal: Ya it has the content type.