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

Question

I am trying to parse in my HTML page many JSON files: Here is my service's code:

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

In my HTML file , I only have the information of the first json file.

Here's my HTML code:

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

Is there something to add in my HTML so I can get the information from all the json files or any other solution?

Answer 1

First off, you return in the first iteration in your for loop, so you only get the data for the first url. Don't return right away, assign a scope variable to your data:

Factory

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

Controller

$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

I think what you are looking for is $q.all

I would solve the problem like this

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

Then I would create an other service

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

    var helperService = {};

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

    return helperService;
});

Then in my controller ..

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

          });
      },
      function(error) {

      }
    );
  }

That's how i would get access to this data