如何使用AngularJS解析许多json文件

Question

我试图在我的HTML页面中解析许多JSON文件：这是我的服务代码：

app.factory('myapp', ['$http', function($http) {
var tab = ['url1', 'url2', 'url3'] 
for(i=0; i<tab.length; i++){
  return $http.get(tab[i]) 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); }
}]);

在我的HTML文件中，我只有第一个json文件的信息。

这是我的HTML代码：

<tr>
<td>{{data.nm}}</td>
<td>{{data.cty}}</td>   
<td>{{data.hse}}</td>
<td>{{data.yrs}}</td> 
</tr> 

是否有东西要添加到我的HTML中，以便我可以从所有json文件或任何其他解决方案中获取信息？

Answer 1

首先，您在for循环的第一次迭代中返回，因此您只获取第一个url的数据。 不要立即返回，为您的数据分配范围变量：

厂

app.factory('myapp', ['$http', function($http) {        
    function getLists() {
        var tab = ['url1', 'url2', 'url3'];
        var list = [];
        for(i=0; i<tab.length; i++){
        $http.get(tab[i]) 
            .then(function(res) {
                list.push(res.data);
            });
        }
        return list;
    }

    return {
        getLists: getLists
    };
]);

调节器

$scope.list = myapp.getLists();

HTML

<tr ng-repeat="d in list">
  <td>{{d.nm}}</td>
  <td>{{d.cty}}</td>   
  <td>{{d.hse}}</td>
  <td>{{d.yrs}}</td> 
</tr> 

Answer 2

我认为你要找的是$ q.all

我会像这样解决问题

angular.module('app').factory('myRequestsFactory',function($http, apiHost) {

    var myRequestsFactory = {};

    myRequestsFactory.geturl1 = function() {
        return $http.get(url1);
    };

    myRequestsFactory.geturl2 = function() {
        return $http.get(url2);
    };

    myRequestsFactory.geturl3 = function() {
        return $http.get(url3);
    };

    return myRequestsFactory;
});

然后我会创建一个其他服务

angular.module('app').factory('helperService',function($q, myRequestsFactory) {

    var helperService = {};

    helperService.GetAll = function() {
      return $q.all([
                      myRequestsFactory.geturl1(), 
                      myRequestsFactory.geturl2(), 
                      myRequestsFactory.geturl3() ]);
      };

    return helperService;
});

然后在我的控制器..

  function loadData() {
        helperService.GetAll().then(
          function(result) {
            $scope.url1result = result[0];
            $scope.url2result = result[1];
            $scope.url3result = result[2];

          });
      },
      function(error) {

      }
    );
  }

这就是我将如何访问这些数据