ui-grid ne restituera pas les données

J'essaie d'afficher les données dans le tableau auquel j'accède depuis l'API de repos. Mon code pour la mettre en œuvre est la suivante:ui-grid ne restituera pas les données

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

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

</div>

contrôleur

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; 
     }

Avec ce code, tout ce que je reçois est une table vide avec des champs de colonne. Aucune donnée n'est affichée. Les données renvoyées par l'API est dans le format suivant:

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

Ai-je besoin de formater les données telles qu'il est lisible par vm.gridOptions.data? À l'heure actuelle, tout ce que je reçois est:

Source

2017-06-21 user2128

Etes-vous sûr de la réponse retourne un tableau? vm.gridOptions.data = responseData; La réponse est poussée dans la variable ci-dessus mais essayez-vous d'itérer la même variable dans le HTML? – CrazyMac

Oui, je répète sur responseData.objects.length. pour (i = 0; i user2128

Je n'ai pas vu ce morceau de code dans votre message. Si la réponse du serveur est un tableau, alors vous devrez itérer angular.forEach (response.data, function (élément, index) {vm.gridOptions.push (élément)} .Vous pouvez ensuite utiliser vm.gridOptions dans votre HTML pour Vous devez également déclarer vm.gridOptions comme tableau [] et non comme objet {} – CrazyMac

Tout ce que je devais faire était de définir vm.gridOptions en fonction populateGrid() où i définir l'objet vm.gridOptions. J'ai créé un objet temporaire où je stocke responseData puis attribuez-lui à 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; 
     }

Source

2017-06-21 06:16:17 user2128

ui-grid ne restituera pas les données

Répondre

Questions connexes