accessing json data in angularjs datatables using dtOptions

Question

I am using Angular Datatables and jquery datatables to populate my json data.Am not able to access the json data using DTColumnBuilder.withnewColumn(). I've tried it several times but not able to figure it out,can anyone help me with the solution.

$scope.dtOptions = DTOptionsBuilder.fromFnPromise( multishiftService.fetchfunds())
.withPaginationType('extStyle')
.withDOM ( '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>' )
.withOption('bFilter', false)
.withOption('bInfo',false);



 $scope.dtColumns = [ 

    DTColumnBuilder.newColumn('contracts.contracts[0].productGroup').withTitle('Fund Name'),
    DTColumnBuilder.newColumn(null).withTitle('Transfer %')

  ];




  $scope.dtColumnDefs = [

        DTColumnDefBuilder.newColumnDef(0).renderWith(function(data, type, full) {
                return '<a href="#">' + data + '</a>';

        }),
        DTColumnDefBuilder.newColumnDef(1).renderWith(function(data, type, full) {
            return '<input class="inputs txtFunds dt-body-center" type="text"/> %';
        })
    ];

and my html code is:

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-column-defs="dtColumnDefs" cellspacing="0" width="100%" class="display fundsTable row-border hover">
   </table>

sample json data:

{
"contracts": {
    "contracts": [
        {
            "productGroup": "American Legacy",
            "restrictionCode": "",
            "restrictionDesc": "",
            "owners": [
                {
                    "address": {
                        "line1": "1541 EAST PALESTINE ROAD",
                        "line2": null,
                        "line3": null,
                        "line4": null,
                        "line5": null,
                        "city": "PALESTINE",
                        "state": "TX",
                        "zip": "75801-732"
                    },
                    "lastName": "ANAND",
                    "firstName": "MANUSHRIFA11",
                    "state": "TX",
                    "roleCode": "8",
                    "lastNameFirstName": "ANAND, MANUSHRIFA11"
                }
            ],
            "effectiveDate": "02/19/2008",
            "effectiveDateValue": 1203359400000,
            "effectiveDateValueStr": "02/19/2008",
            "valuationDate": 1412706600000,
            "valuationDateStr": "10/08/2014",
            "riders": [
                ""
            ],
            "serviceFeatures": [
                "N/A"
            ],
            "contract": "957097001",
            "lob": "VARIABLE ANNUITY- <br>AM LEGACY FUSION",
            "productFamily": null,
            "value": 212793.24,
            "clients": [
                {
                    "clientType": "Annuitant",
                    "lastName": "ANAND",
                    "firstName": "MANUSHRIFA11",
                    "birthDate": "10/25/1951",
                    "roleCode": "35",
                    "lastNameFirstName": "ANAND, MANUSHRIFA11",
                    "ageSevntyAndHalf": false,
                    "genderCode": "F"
                }
            ],
            "marketTypes": null,
            "active": true,
            "producerName": "KENNETH FREE",
            "primaryInsuredDob": "10/25/1951",
            "primaryInsuredGenderCode": "F",
            "primaryOwnerState": "TX",
            "faceAmt": 0,
            "indivCompany": "Individual"
        },
        {
            "productGroup": "American Legacy",
            "restrictionCode": "",
            "restrictionDesc": "",
            "owners": [
                {
                    "address": {
                        "line1": "1 MADISON AVE",
                        "line2": null,
                        "line3": null,
                        "line4": null,
                        "line5": null,
                        "city": "NEW YORK",
                        "state": "NY",
                        "zip": "100103603"
                    },
                    "lastName": "",
                    "firstName": "EDWARD JONES",
                    "state": "NY",
                    "roleCode": "8",
                    "lastNameFirstName": "EDWARD JONES"
                }
            ],
            "effectiveDate": "01/01/2005",
            "effectiveDateValue": 1104517800000,
            "effectiveDateValueStr": "01/01/2005",
            "valuationDate": 1412706600000,
            "valuationDateStr": "10/08/2014",
            "riders": [
                ""
            ],
            "serviceFeatures": [
                "N/A"
            ],
            "contract": "958410707",
            "lob": "VARIABLE ANNUITY- <br>AM LEGACY 3",
            "productFamily": null,
            "value": 133469.72,
            "clients": [
                {
                    "clientType": "Annuitant",
                    "lastName": "NAVEN",
                    "firstName": "KUMARFA11",
                    "birthDate": "02/28/1941",
                    "roleCode": "35",
                    "lastNameFirstName": "NAVEN, KUMARFA11",
                    "ageSevntyAndHalf": true,
                    "genderCode": "M"
                }
            ],
            "marketTypes": null,
            "active": true,
            "producerName": "KENNETH FREE",
            "primaryInsuredDob": "02/28/1941",
            "primaryInsuredGenderCode": "M",
            "primaryOwnerState": "NY",
            "faceAmt": 0,
            "indivCompany": "Company"
        }
    ]
}

}

l-lin · Accepted Answer · 2015-01-07 17:29:12Z

0

By default, Angular-datatables will look for an array as the data. If your data is nested in an object, then you need to provide the AjaxDataProp.

In your case, you should add the withDataProp in your DT options:

$scope.dtOptions = DTOptionsBuilder.fromFnPromise( multishiftService.fetchfunds())
    .withDataProp('contracts.contracts')
    .withPaginationType('extStyle')
    .withDOM ( '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>' )
    .withOption('bFilter', false)
    .withOption('bInfo',false);

Moreover, you don't need to specify the nested attributes when defining your columns:

$scope.dtColumns = [
    DTColumnBuilder.newColumn('productGroup').withTitle('Fund Name'),
    DTColumnBuilder.newColumn(null).withTitle('Transfer %')
];

answered Jan 7, 2015 at 17:29

l-lin

1,0751 gold badge11 silver badges20 bronze badges

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

1 Comment

Max Over a year ago

did this work? I have the same problem and it didnt work for me. Thanks.

Collectives™ on Stack Overflow

accessing json data in angularjs datatables using dtOptions

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related