在UI網格角js顯示json響應

Question

您好新Angular Js試圖在UI網格中顯示json響應，網格將顯示響應的一些元素，請您指點我的權利方向，我應該操縱JSON響應來獲得JSON輸出，看起來酷似我的網格或有沒有辦法來選擇JSON的特定字段在網格中顯示.Thanks

var app = angular.module('app', ['ui.grid', 'ui.grid.selection', 'ui.grid.grouping', 'ui.grid.autoResize', 'ui.grid.pagination']); 
app.controller('MainCtrl', ['$scope', '$http', '$interval',function($scope, $http, $interval) { 

    $scope.gridOptions = { 
     rowHeight: 32, 
     enableRowSelection: true, 
     enableRowHeaderSelection: false 
    }; 

    $scope.gridOptions.columnDefs = [{ 
     name: 'host', 
     width: 300 
    }, { 
     name: 'Service', 
     width: 500 
    }, { 
     name: 'Status', 
     width: 100 
    }, { 
     name: 'Last Check', 
     width: 150 
    }, { 
     name: 'Status Information', 
     width: 200 
    }]; 

    $scope.gridOptions.paginationPageSizes = [10, 25, 50, 100, 500]; 
    $scope.gridOptions.paginationPageSize = 10; 
    $scope.gridOptions.showGridFooter = true; 
    $scope.gridOptions.enablePaginationControls = true; 

    $scope.gridOptions.enableFiltering = true, 
     $scope.gridOptions.multiSelect = true; 
    $scope.gridOptions.modifierKeysToMultiSelect = true; 
    $scope.gridOptions.noUnselect = true; 


    $scope.gridOptions.onRegisterApi = function(gridApi) { 
     $scope.gridApi = gridApi; 
     $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200); 
     $scope.gridApi.treeBase.on.rowExpanded(null, function(row) { 
      updatePagination(row.treeNode.children.length); 
     }); 
     $scope.gridApi.treeBase.on.rowCollapsed(null, function(row) { 
      updatePagination(-row.treeNode.children.length); 
     }); 
    }; 

    function updatePagination(rowsDifference) { 
     //updating pagination will trigger singleFilter where the height is being reset 
     $scope.gridOptions.paginationPageSizes = [$scope.gridOptions.paginationPageSize + rowsDifference, 25, 50, 100, 500]; 
     $scope.gridOptions.paginationPageSize = $scope.gridOptions.paginationPageSize + rowsDifference; 
    } 

    var username='rest_auto_downtime'; 
    var password='r3st_d0wn'; 
    var token; 

    var login = { 
     method: 'POST', 
     url: 'http://wlhost:50000/nagios/rest/login', 
     withCredentials: true, 
     headers: { 
       'Content-Type': 'application/json' 
     }, 
     params:{username: username,password: password} 
    } 
    $http(login).then(function (response) { 
     console.log("success"); 
     token = response.data; 
     console.log(token); 
     getData(token); 
    }, function errorCallback (response) { 
     // Failure Function 
     console.log("Failure"); 
    }); 


    function getData (token){ 
    $http({ 
     method: 'GET', 
     url: ' http://wlhost:50000/nagios/rest/status/service', 
     headers: { 
      'Content-Type': 'application/json', 
      'X-Opsview-Username' :username , 
      'X-Opsview-Token' : token.token 

     }, 
     params:{filter:'unhandled'} 
     }).then(function successCallback(response) { 
      /////////////////////////////////////////////////////////////// 
      //////I need to map the json response to my table here //// 
      $scope.gridOptions.data = response.data; 
      console.log("success"); 
     // this callback will be called asynchronously 
     // when the response is available 
     }, function errorCallback(response) { 
     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
      console.log("Failure"); 
    }); 
    }]); 

這是代碼我在這裏使用json響應有一個對象列表，我只需要使用列表中每個元素的幾個值。

{ 
"summary" : { 
    "handled" : "27", 
    "unhandled" : "37", 
    "service" : { 
    "ok" : "4", 
    "critical" : "3", 
    "handled" : "10", 
    "unhandled" : "35", 
    "unknown" : "38", 
    "total" : "45" 
    }, 
    "total" : "64", 
    "totalhgs" : "4", 
    "host" : { 
    "handled" : "17", 
    "unhandled" : "2", 
    "up" : "15", 
    "down" : "4", 
    "total" : "19" 
} 
}, 
"list" : [ 
    { 
    "hosts" : { 
     "handled" : "7", 
     "unhandled" : "1", 
     "up" : { 
      "handled" : "6" 
     }, 
     "down" : { 
      "handled" : "1", 
      "unhandled" : "1" 
     }, 
     "total" : "8" 
    }, 
    "hostgroupid" : "4", 
    "services" : { 
     "ok" : { 
      "handled" : "1" 
     }, 
     "handled" : "4", 
     "computed_state" : "unknown", 
     "unhandled" : "15", 
     "unknown" : { 
      "handled" : "3", 
      "unhandled" : "15" 
     }, 
     "total" : "19" 
    }, 
    "matpath" : [ 
     { 
      "name" : "Opsview", 
      "id" : "1" 
     }, 
     { 
      "name" : "UK", 
      "id" : "3" 
     } 
    ], 
    "computed_state" : "critical", 
    "downtime" : "2", 
    "name" : "Leaf", 
    "leaf" : "0" 
    }, 
    { 
    "hosts" : { 
     "handled" : "10", 
     "unhandled" : "1", 
     "up" : { 
      "handled" : "9" 
     }, 
     "down" : { 
      "handled" : "1", 
      "unhandled" : "1" 
     }, 
     "total" : "11" 
    }, 
    "hostgroupid" : "1", 
    "services" : { 
     "ok" : { 
      "handled" : "3" 
     }, 
     "critical" : { 
      "unhandled" : "3" 
     }, 
     "handled" : "6", 
     "computed_state" : "critical", 
     "unhandled" : "20", 
     "unknown" : { 
      "handled" : "3", 
      "unhandled" : "17" 
     }, 
     "total" : "26" 
    }, 
    "computed_state" : "critical", 
    "matpath" : [], 
    "downtime" : "2", 
    "name" : "Opsview", 
    "leaf" : "0" 
    } 
]} 

Answer 1

這幾乎取決於。如果您有不同的屬性名稱，則可以使用columnDefs中的屬性field。否則，如果您的屬性是需要從中檢索特定值的對象，則可能需要使用cellTemplate屬性，並從這裏操作內容。您將可以訪問將在範圍內關聯的變量row。更確切地說，row.entity將對應於您發送給$scope.gridOptions.data的response.data[$index]。