Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:

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

}

share|improve this question

1 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 %')
];
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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