Question

我想将从服务调用返回的数据显示到视图中：

服务代码：

.service('HomeExchangeList', function ($rootScope, $http, $log) {
    this.getHomeExchange = function() {
        var rates = $http({
            method: 'GET',
            url: 'http://localhost:8080/feeds/homerates_android.php'
        }).success(function (data) {
            $log.log(data);
            return data;

        });

        return homeRates;
    };
})

服务返回的JSON数据

            {
               "record":[
                  {
                     "Name":"GBP\/USD",
                     "Ticker":"GBP\/USD",
                     "Price":"0.5828",
                     "Open":"0.5835",
                     "High":"0.5848",
                     "Low":"0.5828",
                     "PercentagePriceChange":"0.1371",
                     "Movement":"0.0800",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"EUR\/USD",
                     "Ticker":"EUR\/USD",
                     "Price":"0.7330",
                     "Open":"0.7344",
                     "High":"0.7351",
                     "Low":"0.7327",
                     "PercentagePriceChange":"0.2585",
                     "Movement":"0.1900",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"GHS\/USD",
                     "Ticker":"GHS\/USD",
                     "Price":"3.3350",
                     "Open":"3.2650",
                     "High":"3.3500",
                     "Low":"3.2650",
                     "PercentagePriceChange":"0.8915",
                     "Movement":"3.0000",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"KES\/USD",
                     "Ticker":"KES\/USD",
                     "Price":"87.7000",
                     "Open":"86.2970",
                     "High":"87.6500",
                     "Low":"86.1800",
                     "PercentagePriceChange":"0.0661",
                     "Movement":"5.8000",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"MUR\/USD",
                     "Ticker":"MUR\/USD",
                     "Price":"30.2925",
                     "Open":"29.1460",
                     "High":"29.4300",
                     "Low":"29.0500",
                     "PercentagePriceChange":"-0.0909",
                     "Movement":"-2.7500",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"MWK\/USD",
                     "Ticker":"MWK\/USD",
                     "Price":"393.5000",
                     "Open":"393.3900",
                     "High":"393.3900",
                     "Low":"385.0000",
                     "PercentagePriceChange":"-0.2548",
                     "Movement":"-100.0000",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"NGN\/USD",
                     "Ticker":"NGN\/USD",
                     "Price":"162.3000",
                     "Open":"160.0600",
                     "High":"162.4000",
                     "Low":"160.0600",
                     "PercentagePriceChange":"0.2459",
                     "Movement":"40.0000",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"ZAR\/USD",
                     "Ticker":"ZAR\/USD",
                     "Price":"10.6659",
                     "Open":"10.6751",
                     "High":"10.7162",
                     "Low":"10.6523",
                     "PercentagePriceChange":"0.9840",
                     "Movement":"10.6000",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"ZMK\/USD",
                     "Ticker":"ZMK\/USD",
                     "Price":"47.7014",
                     "Open":"47.3850",
                     "High":"47.7000",
                     "Low":"46.8900",
                     "PercentagePriceChange":"0.0067",
                     "Movement":"0.3165",
                     "DateStamp":"2013\/07\/27",
                     "TimeStamp":"01:55:00"
                  }
               ]
            }

控制器代码

function HomeCtrl($scope, Page, $location, HomeExchangeList) {

    $scope.rates = HomeExchangeList.getHomeExchange();
    $scope.$on('HomeExchangeList', function (event, data) {
        $scope.exchangeRates = data;
    });
}

查看

<ul id="home-rates"  ng-repeat="rate in exchangeRates">
    <li><span class='rate-symbol'>{{rate.Name}}</span><span class='rate-amount'>{{rate.Price}}</span></li>
</ul>

我想在视图中显示服务中返回的数据，但它似乎不起作用。请帮忙

Answer 1

尝试将data.record分配给$ scope.exchangeRates而不是数据...因为数据不包含记录数组...它保存记录然后保存数组

Answer 2

首先，您的服务功能始终返回undefined：

var rates = ...,
return homeRates;

应该是

return rates;

其次，一旦修复，服务就不会返回数据。它返回一个promise，你不能迭代一个promise。您在控制器中需要的是：

HomeExchangeList.getHomeExchange().then(function(data) {
    $scope.rates = data.record;
}

对$ scope。$ on的调用没有任何意义。 $ scope。$ on用于监听事件。不要从承诺中获取数据。

最后，您的视图必须遍历这些retes，而不是遍及exchangeRates：

ng-repeat="rate in rates">

Answer 3

首先，$http次调用都会返回promise，而不是您的请求的结果。您的服务应该只返回$http调用的结果，并且您的控制器需要附加.success处理程序来接收数据并将其设置在控制器的范围内。

.service('HomeExchangeList', function ($rootScope, $http, $log) {
    this.getHomeExchange = function() {
        var rates = $http({
            method: 'GET',
            url: 'http://localhost:8080/feeds/homerates_android.php'
        }).success(function (data) {
            $log.log(data);
            // removed your return data; it doesn't do anything, and this success is only added to log the result. if you don't need the log other than for debugging, get rid of this success handler too.   
        });

        return rates;
    };
})


function HomeCtrl($scope, Page, $location, HomeExchangeList) {
    HomeExchangeList.getHomeExchange().success(function(data) {
        $scope.exchangeRates = data;
    });
}

其次，JSON的根不是数组，因此您不能仅通过exchangeRates进行枚举。也许你的意思是exchangeRates.record。

在angularjs中显示json数据

3 个答案: