0

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

|improve this question|||||
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')        
];
|improve this answer|||||
  • 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'); – davidkonrad Feb 24 '16 at 11:27
  • @davidkonrad, Thanks for the note. Seems like both could be used, see server-side processing example, especially when OP wants to use POST method. – Gyrocode.com Feb 24 '16 at 11:37
  • 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. – davidkonrad Feb 24 '16 at 11:42
  • @davidkonrad, I agree. But you never know what server-side requirements are, sometimes you need to use POST indeed. – Gyrocode.com Feb 24 '16 at 12:03
0

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.

|improve this answer|||||
0

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

|improve this answer|||||
  • Ya it has the content type. – Namal Feb 24 '16 at 10:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.