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

Question

我正在使用 AngularJS，并且我已成功从 fixer.io 获取汇率，但我无法通过键值对循环获取 country 和 rate 数据。现在我能得到的只是利率，我也需要这个国家。有人可以告诉我我的代码中缺少什么吗？我已经在这篇文章的后面进一步介绍了 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

与现场示例的其他答案相同。

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

<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>

Answer 2

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

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

Answer 3

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 4

虽然其他答案对 ng-repeat 的使用是正确的，但我认为从结构上讲，您应该以不同的方式进行。为每个键/值对创建一个带有单个 <li> 的新 <ul> 是没有意义的。您可能应该有一个 <ul> 并为每个国家/地区有一个孩子 <li>，如下所示：

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

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

如果您想获得更高级的格式，可以执行以下操作：

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

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

<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>