Need help looping through json key value pairs

Question

I am using AngularJS and I've successfully pulled in exchange rates from fixer.io but I'm having trouble looping through the key value pairs to get country and rate data. Right now all I'm able to get is rate and I need the country as well. Can someone tell me what I'm missing in my code? I've included what the rates look like on the fixer.io website further down in this post.

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

rates as they appear on the website

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

You can iterate over object properties. Check ngRepeat

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

Answer 2

ng-repeat lets you iterate over both the key and the value of an object's properties. Since that object is a dictionary with the proper key and value pairs, just update your ng-repeat definition:

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

Answer 3

Same as other answers with live example.

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 4

While the others answers' use of ng-repeat is correct, I think, structurally, you should do it differently. It doesn't make sense to make a new <ul> with a single <li> for each key/value pair. You should probably have a single <ul> and have a child <li> for each country/rate like so:

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

Also, interpolation ( aka {{ }} ) should be avoided whenever possible. It is slow, and renders the ugly braces on slower connections when loading the page. Use ng-bind instead.

If you wanted to get somewhat fancier formatting, you can do something like this:

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>