uiグリッドの角度ジェスでのDispay Jsonの応答

Question

こんにちは、角度のJsの新しい私はuiグリッドでjsonの応答を表示しようとしています、グリッドは応答のちょうどいくつかの要素を表示します、方向、私はまさに私のグリッドのように見えたり、グリッドに表示するJSONの特定のフィールドを選択する方法があるJSON出力を得るためにJSONレスポンスを操作するコードは、ここで使用しています

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

を.Thanks必要がありますjsonレスポンスにはObjectsのリストがあり、リストの各要素からちょうど2つの値を使う必要があります。

{ 
"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]に対応します。