从'for循环'返回响应数据 - AngularJS

时间:2017-05-24 09:26:12

标签: javascript angularjs json

Angular的新手。我有一个服务,其目的是从JSON文件获取信息,遍历每个对象,以便我可以从控制器访问数据。我可以从$http请求访问JSON数据,但不能访问服务中for循环的JSON数据。

这是循环浏览AngularJS中项目的最佳方法,如果是,如何从控制器访问和显示此信息?

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

}])

1 个答案:

答案 0 :(得分:1)

简单说明。,从factory\service返回承诺并在controller中解决。 如下所示:

<强>工厂

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

return factory;
}]);

<强>控制器

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

要在view\html上显示此数据,您需要将其分配给某些$scope属性,例如$scope.fxRateData = response.data.fxrate,然后在html中按照您希望的方式呈现它。

仅举例:

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