accessing json data in angularjs datatables using

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

}

Answer 1

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