How to parse many json files using AngularJS

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?

Is it normal that you return many times within the for loop? It seems to me that you're only going to fetch the first url data with this snippet — cfz42
– cfz42, Commented May 18, 2016 at 14:09

John Smith · Accepted Answer · 2016-05-18 15:09:59Z

3

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>

edited May 18, 2016 at 15:09

answered May 18, 2016 at 14:13

John Smith

2,3414 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pankaj Parkar Over a year ago

I don't think so i value will be persisted correctly while inserting value in data object inside.then function, you should pass i value to .then callback function by having anonymous function..

Pankaj Parkar Over a year ago

If the order of insertion doesn't matter to OP, then yes its correct. Thanks +1 :)

nour Over a year ago

I got this error Provider 'myapp' must return a vlaue from $get factory method. In my controller I had: app.controller('MainController', ['$scope', 'myapp', function($scope, myapp) { myapp.success(function(data) { $scope.data = data; }); }]); how should I modify it?

John Smith Over a year ago

Wow, I just realized it's a factory, not a controller. One sec!

John Smith Over a year ago

@nour Updated, could you check please?

MayK · Accepted Answer · 2016-05-18 14:15:00Z

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

Collectives™ on Stack Overflow

How to parse many json files using AngularJS

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related