应用错误收集

角度JSON响应

时间：2016-03-27 13:34:10

标签： angularjs json parsing

以下是我的API的json响应。我想在我的html中使用ng-repeat，以便将这些数据显示给最终用户。如何在我的控制器中反序列化此json数据。

    {
  "message": "Query to return servers",
  "result": [
    {
      "meta": [
        "Computer",
        "SQLPort",
        "Domain"
      ],
      "rows": [
        [
          "MyCompterName",
          "1433",
          "XXXX"
        ]
      ]
    }
  ]
}

这是加载到index.html

中的app.js的代码

var app = angular.module('DSCApp', ['ngRoute', 'ngResource','ui.router']);

配置

app.config(function($routeProvider){
    $routeProvider
        .when('/DSC', {
            templateUrl: "DSC.html",
            controller: 'DscController'
        })
        .otherwise({ redirectTo: '/' });
});

数据工厂

app.factory('dataFactory', ['$http', function($http) {
    var urlBase = '/api';
    var dataFactory = {};

    dataFactory.getServers = function () {
        return $http.get(urlBase);
     };

     return dataFactory;
}]);

控制器

 app.controller('DscController', ['$scope', 'dataFactory',
 function  ($scope, dataFactory) {  
  $scope.status
  $scope.servers;  

  getServers();

        function getServers() {
        dataFactory.getServers()
            .success(function (srv) {
                $scope.servers = srv;
            })
            .error(function (error) {
                $scope.status = 'Unable to load server data: ' + error.message;
            });
    }   

}]);

1 个答案:

答案 0 :(得分：0)

在桌头和桌子主体中使用ng-repeat应该可行。

<html ng-app='app' ng-controller='DscController'>
      <head>
      </head>
      <body>
        <div class="container">
          <div class="jumbotron">
            <table ng-if="servers" class="table table-bordered">
              <thead>
                <tr>
                  <th ng-repeat="head in servers.result[0].meta">{{head}}</th>
                </tr>
              </thead>
              <tbody ng-repeat="r in servers.result">
                <tr ng-repeat="row in r.rows">
                  <td ng-repeat="item in row">{{item}}</td>
                </tr>
              </tbody>
            </table>
            <p ng-if="!servers">{{status}}</p>
          </div>
        </div>
    </body>
 </html>

我已经包含了必要的重复数据来处理与呈现数据完全相同的数据。我假设所有结果的meta都是相同的。