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

Here is the debugger result. debug.datatables.net/urizon

Namal
– Namal

2016-02-24 09:22:17 +00:00
Commented Feb 24, 2016 at 9:22 — Namal
– Namal, Commented Feb 24, 2016 at 9:22

Gyrocode.com · Accepted Answer · 2016-02-24 11:37:34Z

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

edited Feb 24, 2016 at 11:37

answered Feb 24, 2016 at 11:19

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

davidkonrad Over a year ago

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 Over a year ago

@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 Over a year ago

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 Over a year ago

@davidkonrad, I agree. But you never know what server-side requirements are, sometimes you need to use POST indeed.

Tngo · Accepted Answer · 2016-02-24 08:26:41Z

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.

answered Feb 24, 2016 at 8:26

Tngo

1

Comments

cxn · Accepted Answer · 2016-02-24 09:26:46Z

0

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

answered Feb 24, 2016 at 9:26

cxn

211 bronze badge

1 Comment

Namal Over a year ago

Ya it has the content type.

Collectives™ on Stack Overflow

How to use this json with angular datatables

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related