Linking two JSON object in AngularJs

Question

I have 2 linked JSON object array .
Example :
Country :

[{
      "countryCode":"IN",
      "countryName":"India",
      "currencyCode":"INR"
   },
{
      "countryCode":"US",
      "countryName":"United States",
      "currencyCode":"USD"
   }]

Currency :

 [{
      "code":"INR",
      "name":"Indian Rupee",
      "locale":"kok_IN",
      "display":1
   }, {
      "code":"USD",
      "name":"US Dollar",
      "locale":"en_US_POSIX",
      "display":1
   }]

The above two json obejcts are linked with a code . I'm trying display the Currencyname from the currency object by linking the currencycode .
I am displaying like bellow :

<tr ng-repeat="country in countries | filter : query | orderBy : 'name'">
<td>{{ country.countryName }}</td>
<td>{{ }}</td> <!-- Currency name here -->
</tr>

How do I display the currency name here ?

Emir Marques · Accepted Answer · 2015-11-26 13:21:25Z

Works for me with function getCurrencyByCountry:

angular.module("App", []).controller("AppController", function($scope) {
    $scope.countries = [{
        "countryCode": "IN",
        "countryName": "India",
        "currencyCode": "INR"
    }, {
        "countryCode": "US",
        "countryName": "United States",
        "currencyCode": "USD"
    }];
    
    $scope.currency = [{
        "code": "INR",
        "name": "Indian Rupee",
        "locale": "kok_IN",
        "display": 1
    }, {
        "code": "USD",
        "name": "US Dollar",
        "locale": "en_US_POSIX",
        "display": 1
    }];
    
    $scope.getCurrencyByCountry = function(country){
        var currency = "";
        angular.forEach($scope.currency, function(value, key) {
            if(country.currencyCode == value.code){
                currency = value.name;
                return false;
            }
        });
        return currency;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="App" ng-controller="AppController">
  <tr ng-repeat="country in countries |orderBy : 'name'">
    <td>{{country.countryName}}</td>
    <td>{{getCurrencyByCountry(country)}}</td>
    <!-- Currency name here -->
  </tr>
<table>

Simon H · Accepted Answer · 2015-11-27 07:36:17Z

0

I would implement in a controller function

$scope.currencies = [{
    "code": "INR",
    "name": "Indian Rupee",
    "locale": "kok_IN",
    "display": 1
}, {
    "code": "USD",
    "name": "US Dollar",
    "locale": "en_US_POSIX",
    "display": 1
}];
$scope.getCurrency(code) {
    return $scope.currencies.find(c => c.code === code).name;
}

(Let me know if you need this in ES5 instead)

Then you can use

{{getCurrency(country.code)}}

edited Nov 27, 2015 at 7:36

answered Nov 26, 2015 at 13:11

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

3 Comments

Vittal Das Over a year ago

can you explain what is it doing ??

Simon H Over a year ago

the same as the answer you accepted but in one line, instead of 10

Vittal Das Over a year ago

Actually I couldn't understand how to use it .

Collectives™ on Stack Overflow

Linking two JSON object in AngularJs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related