Returning response data from a 'for loop' - AngularJS

Question

Reasonably new to Angular. I have a service which purpose is to get information from a JSON file, iterate through each object, so I can access the data from the controller. I can access the JSON data from the $http request, but not the JSON data from the for loop within the service.

Is this is the best way to loop through items in AngularJS, if so, how do I access and display this information from the controller?

app.factory('fxRate', ['$http', '$q', function($http, $q){

var factory = {};

factory.getFx = function() {
    var deferred = $q.defer();

    $http.get('../json/mcfx.json')
        .then(
            function(response){

                var d, i;

                var rateData = response.data.fxrate;

                for (var i in rateData) {
                    var fx = rateData[i].usdToEur;
                    var fxDate = rateData[i].date;
                }
                deferred.resolve(response.data);
            }, 
            function(errResponse){
                deferred.reject(errResponse.data);
            }
        )

    return deferred.promise;

}

return factory;

}]);

app.controller('dashboard', ['$scope', 'fxRate', function($scope, fxRate){ 

$scope.dailyFx = function() {
    fxRate.getFx().then(function(data){
        console.log(data)
    });
}

$scope.dailyFx();

}])

anoop · Accepted Answer · 2017-05-24 09:43:10Z

1

Make it simple., return promise from factory\service and resolve in controller. Like below:

Factory

app.factory('fxRate', ['$http', function($http){
var factory = {};
factory.getFx = function() {
    return $http.get('../json/mcfx.json');
}

return factory;
}]);

Controller

app.controller('dashboard', ['$scope', 'fxRate', function($scope, fxRate){ 
$scope.dailyFx = function() {
    fxRate.getFx().then(function(resonse) {
        console.log(resonse.data)
        //handle resonse\data, or assign to some $scope property.
        var rateData = response.data.fxrate;
        for (var i in rateData) {
           var fx = rateData[i].usdToEur;
           var fxDate = rateData[i].date;
         }
    });
}

$scope.dailyFx();
}])

To show this data on view\html, you need to assign this to some $scope property, like $scope.fxRateData = response.data.fxrate, and then in html render it the way you want.

For example only :

<div ng-repeat="fxrate in fxRateData track by $index">
  <span>{{fxrate.usdToEur}}</span>
  <span>{{fxrate.date}}</span>
</div>

edited May 24, 2017 at 9:43

answered May 24, 2017 at 9:31

anoop

3,8222 gold badges18 silver badges28 bronze badges

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

2 Comments

Patrick McDermott Over a year ago

This is true, though if I wanted to keep functions separate from the controller....... how would I go about that?

anoop Over a year ago

@PatrickMcDermott : your function $scope.dailyFx() is quite separate and further you can extracta nother method from response section, if you do some manipulation with response.data., like some handleResponse(response.data)

Collectives™ on Stack Overflow

Returning response data from a 'for loop' - AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related