I am currently working on a MEANJS application that includes a CRUD module for countries. When I select a country from the default list view, it redirects me to the view-country.client.view page. In order to enhance my model, I have introduced a field named currencycode. My goal is to display the exchange rate by matching the currencycode field of the Country model with data imported from a JSON file.
//view-country.client.view
<section data-ng-controller="CountriesController" data-ng-init="findRate()">
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="panel panel-dark">
<div class="panel-heading">Currency</div>
<div class="panel-body">
{{country.currencycode}}
<p>The exchange rate is {{exchangeRates.rates['AFN']}}
</div>
</div>
</div>
</section>
//findRate() for data-ng-init in CountriesController
$scope.findRate = function() {
$scope.country = Countries.get({
countryId: $stateParams.countryId
});
$http.get('http://localhost:3000/rates.json').
success(function(data) {
$scope.exchangeRates = data
});
};
Currently, the integration with the JSON import functions correctly, returning the appropriate rate when including the country code (e.g., 'AFN' for Afghanistan). However, the challenge arises when attempting to dynamically embed the {{country.currencycode}} within the 'AFN'. Despite experimenting with filters, I have not been able to achieve the desired outcome. Essentially, I aim for each click on a country to only display the corresponding rate through utilizing the model property as a string to retrieve the correct object from the array. After spending an entire day scouring forums without success, any assistance would be greatly appreciated. Thank you.