Question

我正在使用AngularJS并且我已经成功提取了fixer.io的汇率，但是我无法通过关键值对来获得国家和率数据。现在我所能得到的只是率，我也需要这个国家。有人能告诉我我的代码中缺少什么吗？我在这篇文章中进一步介绍了fixer.io网站上的费率。

HTML5

<div ng-controller="AngularJSCtrl">
    <ul ng-repeat="x in data.rates">
        <li>{{ x }}</li>
    </ul>
  </div>

JS

var myApp = angular.module('myApp',[]);

myApp.service('dataService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.getData = function(callbackFunc) {
        $http({
            method: 'GET',
            url: 'http://api.fixer.io/latest',
            params: 'limit=10, sort_by=created:desc',
            headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
        }).success(function(data){
            // With the data succesfully returned, call our callback
            callbackFunc(data);
        }).error(function(){
            alert("error");
        });
     }
});

myApp.controller('AngularJSCtrl', function($scope, dataService) {
    $scope.data = null;
    dataService.getData(function(dataResponse) {
        $scope.data = dataResponse;
    });
});

出现在网站上的费率

{
    "base": "EUR",
    "date": "2016-09-20",
    "rates": {
        "AUD": 1.4812,
        "BGN": 1.9558,
        "BRL": 3.6473,
        "CAD": 1.4792,
        "CHF": 1.0943,
        "CNY": 7.4604,
        "CZK": 27.022,
        "DKK": 7.452,
        "GBP": 0.86213,
        "HKD": 8.6753,
        "HRK": 7.5127,
        "HUF": 309.12,
        "IDR": 14698.01,
        "ILS": 4.2231,
        "INR": 74.962,
        "JPY": 113.93,
        "KRW": 1252.4,
        "MXN": 21.965,
        "MYR": 4.631,
        "NOK": 9.2648,
        "NZD": 1.522,
        "PHP": 53.527,
        "PLN": 4.2975,
        "RON": 4.4513,
        "RUB": 72.5141,
        "SEK": 9.5763,
        "SGD": 1.5237,
        "THB": 38.909,
        "TRY": 3.3275,
        "USD": 1.1184,
        "ZAR": 15.5144
    }
}

Answer 1

您可以迭代对象属性。查看ngRepeat

   <div ng-controller="AngularJSCtrl">
        <ul ng-repeat="(country, rate) in data.rates">
            <li>{{ country }} - {{ rate }}</li>
        </ul>
    </div>

Answer 2

ng-repeat可以iterate over both the key and the value of an object's properties。由于该对象是具有正确键和值对的字典，因此只需更新ng-repeat定义：

<ul ng-repeat="(key, value) in data.rates">
    <li>{{key}}: {{ value }}</li>
</ul>

Answer 3

与实例的其他答案相同。

＆＃13;

angular.module('app',[])
.controller('MyCtrl', function($scope){
$scope.data = 
{
    "base": "EUR",
    "date": "2016-09-20",
    "rates": {
        "AUD": 1.4812,
        "BGN": 1.9558,
        "BRL": 3.6473,
        "CAD": 1.4792,
        "CHF": 1.0943,
        "CNY": 7.4604,
        "CZK": 27.022,
        "DKK": 7.452,
        "GBP": 0.86213,
        "HKD": 8.6753,
        "HRK": 7.5127,
        "HUF": 309.12,
        "IDR": 14698.01,
        "ILS": 4.2231,
        "INR": 74.962,
        "JPY": 113.93,
        "KRW": 1252.4,
        "MXN": 21.965,
        "MYR": 4.631,
        "NOK": 9.2648,
        "NZD": 1.522,
        "PHP": 53.527,
        "PLN": 4.2975,
        "RON": 4.4513,
        "RUB": 72.5141,
        "SEK": 9.5763,
        "SGD": 1.5237,
        "THB": 38.909,
        "TRY": 3.3275,
        "USD": 1.1184,
        "ZAR": 15.5144
    }
}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  
  <div ng-repeat="(key,value) in data.rates">
    {{key}} - {{value}}
  </div>
</div>

＆＃13;

Answer 4

而其他人回答＆＃39;使用ng-repeat是正确的，我认为，在结构上，你应该采用不同的方式。对于每个键/值对，为一个<ul>创建一个新的<li>是没有意义的。您应该只有一个<ul>并且每个国家/地区的费率为<li>，如下所示：

<ul>
    <li ng-repeat="(country, rate) in data.rates" ng-bind="country + ': ' + rate"></li>
</ul>

此外，应尽可能避免插值（aka {{}}）。它很慢，并且在加载页面时在较慢的连接上呈现丑陋的括号。请改用ng-bind。

如果你想获得更有趣的格式化，你可以这样做：

＆＃13;

var myModule = angular.module('myModule', []);
  myModule.controller("myCtrl", ["$scope", function($scope) {
    $scope.data = {
      "base": "EUR",
      "date": "2016-09-20",
      "rates": {
        "AUD": 1.4812,
        "BGN": 1.9558,
        "BRL": 3.6473,
        "CAD": 1.4792,
        "CHF": 1.0943,
        "CNY": 7.4604,
        "CZK": 27.022,
        "DKK": 7.452,
        "GBP": 0.86213,
        "HKD": 8.6753,
        "HRK": 7.5127,
        "HUF": 309.12,
        "IDR": 14698.01,
        "ILS": 4.2231,
        "INR": 74.962,
        "JPY": 113.93,
        "KRW": 1252.4,
        "MXN": 21.965,
        "MYR": 4.631,
        "NOK": 9.2648,
        "NZD": 1.522,
        "PHP": 53.527,
        "PLN": 4.2975,
        "RON": 4.4513,
        "RUB": 72.5141,
        "SEK": 9.5763,
        "SGD": 1.5237,
        "THB": 38.909,
        "TRY": 3.3275,
        "USD": 1.1184,
        "ZAR": 15.5144
      }
    }
  }]);

＆＃13;

ul > li {
  list-style: none;
}
ul > li:nth-child(even) {
  background-color: #cecece;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule" ng-controller="myCtrl">
  <ul style="width: 150px;">
    <li ng-repeat="(country, rate) in data.rates">
      <span ng-bind="country + ': '"></span><span style="float: right;" ng-bind="rate | number:4"></span>
    </li>
  </ul>
</div>

＆＃13;

需要帮助循环遍历json键值对

4 个答案: