dtOptions를 사용하여 angularjs 데이터 테이블의 json 데이터에 액세스

Question

Angular Datatables 및 jquery 데이터 테이블을 사용하여 json 데이터를 채 웁니다. DTColumnBuilder.withnewColumn()을 사용하여 json 데이터에 액세스 할 수 없습니다. 나는 여러 번 시도했지만 그것을 알아낼 수 없으며, 누군가 해결책을 도울 수 있습니다.

$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"/> %'; 
     }) 
    ]; 

내 HTML 코드는 다음과 같습니다

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

샘플 JSON 데이터 :

{ 
"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

기본적으로 각도-datatables는 데이터로 배열을 찾습니다 . 데이터가 객체에 중첩되어있는 경우 AjaxDataProp을 제공해야합니다. 귀하의 경우에는

, 당신은 당신의 DT 옵션에서 withDataProp을 추가해야합니다 :

$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); 

을 또한, 당신이 당신의 열을 정의 할 때 중첩 된 속성을 지정할 필요가 없습니다 :

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