Struggling to iterate over key-value pairs in a JSON object?

Question

Struggling to iterate over key-value pairs in a JSON object?

I am currently working with AngularJS and have successfully retrieved exchange rates from fixer.io. However, I am facing difficulties in extracting both the country and rate data by looping through the key-value pairs. At the moment, I can only access the rate and I also need the country information. Can anyone pinpoint what I may be missing in my code? Below is a snippet showcasing how the rates are displayed on the fixer.io website.

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

javascript angularjs json

Answer 1

Answer №1

Similar to the other responses, here is a demonstration with a 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 2

Similar to the other responses, here is a demonstration with a 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 3

Answer №2

If you want to loop through object properties, you can use ngRepeat directive in AngularJS. For more information, visit ngRepeat documentation

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

Answer 4

If you want to loop through object properties, you can use ngRepeat directive in AngularJS. For more information, visit ngRepeat documentation

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

Answer 5

Answer №3

ng-repeat is a handy directive that allows you to loop through both the keys and values of an object's properties. If you have a dictionary with key-value pairs, all you need to do is modify your ng-repeat declaration like this:

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

Answer 6

ng-repeat is a handy directive that allows you to loop through both the keys and values of an object's properties. If you have a dictionary with key-value pairs, all you need to do is modify your ng-repeat declaration like this:

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

Answer 7

Answer №4

Even though the other answers correctly use ng-repeat, I believe there is a better way to structure the code. Creating a new <ul> with a single <li> for each key/value pair doesn't seem logical. Instead, you should have a single <ul> with a child <li> for each country/rate combination like this:

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

Additionally, it is recommended to avoid interpolation ({{ }}) whenever possible as it can slow down the page loading process, especially on slower connections. It's better to use ng-bind instead.

If you want to add some formatting to the output, you can follow this example:

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,
        ... // other country/rate pairs
      }
    }
  }]);

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>

Answer 8

Even though the other answers correctly use ng-repeat, I believe there is a better way to structure the code. Creating a new <ul> with a single <li> for each key/value pair doesn't seem logical. Instead, you should have a single <ul> with a child <li> for each country/rate combination like this:

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

Additionally, it is recommended to avoid interpolation ({{ }}) whenever possible as it can slow down the page loading process, especially on slower connections. It's better to use ng-bind instead.

If you want to add some formatting to the output, you can follow this example:

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,
        ... // other country/rate pairs
      }
    }
  }]);

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>

Struggling to iterate over key-value pairs in a JSON object?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ensure the initial word (or potentially all words) of a statement is in uppercase in Angular 2+

Using React's useEffect to implement a mousedown event listener

Executing code within Vue js $set method's callback

Mastering file handling with jQuery File Upload Middleware in Node.js Express: blending files and branding with watermarks

How can I efficiently remove elements from the end of an array in Vue.js?

Setting the default typing language in Protractor: A step-by-step guide

Creating dynamic HTML elements with bound JSON data

What is the proper way to add an object to an array within an object in TypeScript?

What is the recommended approach for effectively cascading the deletion of a secondary object in MongoDB when an account is

transforming the jquery form submission to angular

Guide on inserting text within a Toggle Switch Component using React

Show the value of one text box inside another text box by harnessing the power of AngularJs when a

Setting an Alias for AVA Tests: A Step-by-Step Guide

The tab element is not receiving a click event in Protractor

transmit JSON formatted form data to an AngularJS platform

Placing miniature vessels within a larger vessel, where two small containers fit on one level of the larger container (refer to images)

Struggling to achieve the expected results when trying to convert a PHP array into JSON

Is Angularjs revolutionizing the use of service dictionaries for Dependency Injection by consolidating multiple services into one?

Is it common for NA values to appear in the data frame due to JSON parsing?

Enzyme fails to locate text within a div even though it is present