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

时间:2016-05-18 14:03:34

标签: javascript angularjs json

我试图在我的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文件或任何其他解决方案中获取信息?

2 个答案:

答案 0 :(得分:3)

首先,你在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> 

答案 1 :(得分:0)

我认为你要找的是$ 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) {

      }
    );
  }

我将如何访问此数据