2017-06-21 13 views
0

私は残りのAPIからアクセスしているテーブルにデータを表示しようとしています。私のコードは次のようにそれが実現しますui-gridはデータをレンダリングしません

<div ng-controller="AuditorReportController as vm"> 

    <div ui-grid="vm.gridOptions" style="padding-top: 10%;"> 
    </div> 

</div> 

コントローラ:

var vm = this; 
     var i; 
     // activate(); 
     var dataitems; 
     vm.gridOptions = {}; 
     var gridData; 

function userEventData (resp) { 
      $http({ 
       method: "GET", 
       url: resp.results["@href"] 
      }).success(function (responseData) { 
       logger.info("userEventData responseData", responseData); 
       vm.gridOptions.data = responseData; 
       logger.info("gridOptions", vm.gridOptions.data); 
       filterEventField(responseData); 
       //return responseData; 
      }); 
     } 

function populateGrid (responseData) { 
      logger.info("populateGrid function activated"); 
      vm.dateFormat = "medium"; 
      vm.gridOptions = { 
       enableColumnMenus: false, 
       enableColumnResizing: true, 
       enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED, 
       enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER, 
       enableRowSelection: true, 
       enableSelectAll: true, 
       paginationPageSizes: [10, 20, 30, 40, 50], // Using the same options as old UI 
       paginationPageSize: 20, // Use 20 as the default page size everywhere until user changes it 
       paginationTemplate: "core/templates/ui-grid-pagination-template.html", 
       rowTemplate: gridService.getRowTemplate(), 
       useExternalPagination: true, 
       useExternalSorting: true, 
       columnDefs: [ 
        { 
         field: "sun", 
         displayName: "Init User", 
         enableHiding: false, 
         allowCellFocus: false 
        }, 
        { 
         field: "dun", 
         displayName: "Target User", 
         enableHiding: false, 
         allowCellFocus: false 
        }, 
        { 
         field: "evt", 
         displayName: "Name", 
         enableHiding: false, 
         allowCellFocus: false 
        }, 
        { 
         field: "dip", 
         displayName: "What is affected", 
         enableHiding: false, 
         allowCellFocus: false 
        }, 
        { 
         field: "det", 
         displayName: "Time created", 
         enableHiding: false, 
         allowCellFocus: false 
        } 
       ], 
       /** 
       * @ngdoc function 
       * @name gridApi 
       * @memberof app.alerts.grid.AlertViewsController.populateGrid 
       * @summary 
       * ui grid call back functions 
       */ 
       onRegisterApi: function (gridApi) { 
        vm.gridApi = gridApi; 
       } 

      } 
       vm.gridOptions.totalItems = vm.totalCount; 
     } 

をこのコードでは、私が取得していますすべての列フィールドを持つ空のテーブルです。データは表示されません。 APIから返されるデータの形式は次のとおりです。

{ 
    "next": { 
    "@href": "https://objects/event?page=2&pagesize=25&field=evt&field=det&field=spt&field=dip&field=dun&field=sun&query=_jobid_.efa2ebf67d479e39d49385D60384E1035B880000C29194FA7" 
    }, 
    "objects": [ 
    { 
     "meta": { 
     "type": "event", 
     "@href": "https://objects/event/1498008581468/49385D60-384E-1035-B44E-000C29194FA7" 
     }, 
     "det": "2017-06-21T01:29:41.468Z", 
     "dip": "12.16.12.18", 
     "spt": "2017-06-21T01:29:41.468Z", 
     "evt": "LoginUser", 
     "dun": "admin", 
     "sun": "admin" 
    }, 
    { 
     "meta": { 
     "type": "event", 
     "@href": "https://objects/event/1498008581439/49385D60-384E-1035-B44C-000C29194FA7" 
     }, 
     "det": "2017-06-21T01:29:41.439Z", 
     "dip": "12.16.12.18", 
     "spt": "2017-06-21T01:29:41.439Z", 
     "evt": "IssueSAMLToken", 
     "dun": "admin", 
     "sun": "admin" 
    }, 
    { 
     "meta": { 
     "type": "event", 
     "@href": "https:/1DEF74E0-376D-1035-AF66-000C29194FA7" 
     }, 
     "det": "2017-06-20T02:16:55.799Z", 
     "dip": "12.16.12.18", 
     "spt": "2017-06-20T02:16:55.799Z", 
     "evt": "LogOffUser", 
     "dun": "admin", 
     "sun": "admin" 
    } 
    ] 
} 

は、私はそれがvm.gridOptions.dataによって読み取り可能であるようにデータをフォーマットする必要がありますか? 現在、私は取得していますすべてがある: enter image description here

+0

に割り当てる一時オブジェクトを作成したあなたは、応答が配列を返しますか? vm.gridOptions.data = responseData; 応答は上記の変数にプッシュされますが、HTML内の同じ変数を反復しようとしていますか?私はresponseData.objects.lengthを反復処理しています。 – CrazyMac

+0

for(i = 0; i user2128

+0

私はあなたのポストでそのコードを見ていませんでした。サーバーレスポンスが配列の場合は、angle.forEach(response.data、function(element、index){vm.gridOptions.push(element)}を反復処理する必要があります。次に、html-to-また、オブジェクト{}ではなく配列[]としてvm.gridOptionsを宣言する必要があります – CrazyMac

答えて

0

私がしなければならなかったすべては、私はvm.gridOptionsオブジェクトを定義populateGridでvm.gridOptions()関数を定義しました。 私はresponseDataを格納し、vm.gridOptions.data

function populateGrid() { 
      vm.dateFormat = "medium"; 
      var temp = vm.gridOptions.data; 
      vm.gridOptions = { 
       enableColumnMenus: false, 
       enableColumnResizing: true, 
       enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED, 
       enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER, 
       enableRowSelection: true, 
       enableSelectAll: true, 
       paginationPageSizes: [10, 20, 30, 40, 50], // Using the same options as old UI 
       paginationPageSize: 20, // Use 20 as the default page size everywhere until user changes it 
       paginationTemplate: "core/templates/ui-grid-pagination-template.html", 
       rowTemplate: gridService.getRowTemplate(), 
       useExternalPagination: true, 
       useExternalSorting: true, 
       columnDefs: [ 
        { 
         field: "sun", 
         displayName: "Init User", 
         enableHiding: false, 
         allowCellFocus: false 
        }, 
        { 
         field: "dun", 
         displayName: "Target User", 
         enableHiding: false, 
         allowCellFocus: false 
        }, 
        { 
         field: "evt", 
         displayName: "Name", 
         enableHiding: false, 
         allowCellFocus: false 
        }, 
        { 
         field: "dip", 
         displayName: "What is affected", 
         enableHiding: false, 
         allowCellFocus: false 
        }, 
        { 
         field: "det", 
         displayName: "Time created", 
         enableHiding: false, 
         allowCellFocus: false 
        } 
       ], 
       /** 
       * @ngdoc function 
       * @name gridApi 
       * @memberof app.alerts.grid.AlertViewsController.populateGrid 
       * @summary 
       * ui grid call back functions 
       */ 
       onRegisterApi: function (gridApi) { 
        vm.gridApi = gridApi; 
       } 

      } 
       vm.gridOptions.totalItems = vm.totalCount; 
       vm.gridOptions.data = temp.objects; 
     } 
関連する問題