2016-11-29 2 views
0

Привет Я новый для Angular Js, пытающийся отобразить json-ответ в сетке ui, сетка отобразит только некоторые элементы ответа, можете ли вы указать мне на правую направление, я должен манипулировать ответ JSON, чтобы получить JSon вывода, который выглядит точно так же, как моя сетка или есть способ, чтобы выбрать конкретные поля в формате JSON для отображения в сетке .THANKSDispay Json response in ui-grid angular js

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 response имеет список объектов, и мне нужно использовать только пару значений из каждого элемента в списке.

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

Первоначально на успех я использовал $ scope.gridOptions.data = данные, где данные представляют собой издевательские данные, которые точно соответствуют сетке. теперь у меня есть более сложная структура, которую мне нужно манипулировать, прежде чем ее отображать, и я не знаю, как это сделать. – Mero

+0

Измените свой вопрос, разместив свой код и пример данных json. –

ответ

1

Это зависит от многого. Если у вас разные имена атрибутов, вы можете просто использовать атрибут field в columnDefs. В противном случае, если ваши атрибуты являются объектами, из которых вам нужно получить определенное значение, вы можете использовать атрибут cellTemplate и манипулировать содержимым отсюда. У вас будет доступ к переменной row, которая будет связана с областью действия. Точнее, row.entity будет соответствовать response.data[$index], которую вы отправили на номер $scope.gridOptions.data.

+0

Я попытаюсь узнать больше об этом подходе и сообщить вам, как это происходит. благодаря – Mero