What is the method to retrieve the complete name of the primary key field (country name) in Angular JS using HTML

Question

What is the method to retrieve the complete name of the primary key field (country name) in Angular JS using HTML

Utilizing AngularJS and Lodash, I am making a call to an API that returns JSON data structured as follows:

[{ "_id":"zw",
   "name":"Zimbabwe"   
},
{ "_id":"au",
   "name":"Australia"   
},
{ "_id":"in",
   "name":"India"   
}]

To map country codes to their respective full country names, I have created the following function:

$scope.CountryHashmap  =  _.reduce(res,  function (hash,  value)  {
          var  key  =  value['_id'];
          hash[key]  =  value['name'];
          return  hash;
        },  {});

Upon executing the _.reduce function, the mapped data looks like this:

{
"zw":"Zimbabwe",
"au":"Australia",
"in":"india"

}

On my HTML page, I already have country codes present, and I aim to replace these codes with the corresponding full country names.

HTML:

{{countryCode}}

The countryCodes may include au, in, and zw.

javascript angularjs json lodash

Answer 1

Answer №1

Retrieve the country name from $scope.CountryHashmap by accessing the countryCode key.

{{CountryHashmap[countryCode]}}

You could alternatively define a function for this purpose.

$scope.getName(code){
    if(code)
        return $scope.CountryHashmap[code];
}

Your request is not very clear. :)

Answer 2

Retrieve the country name from $scope.CountryHashmap by accessing the countryCode key.

{{CountryHashmap[countryCode]}}

You could alternatively define a function for this purpose.

$scope.getName(code){
    if(code)
        return $scope.CountryHashmap[code];
}

Your request is not very clear. :)

Answer 3

Answer №2

To properly access country data, simply use the country code key to retrieve information from the mapped data array like mappedDataArr[key].

var app = angular.module("myApp", []);

app.controller("MyCtrl", function($scope) {
    $scope.mappedDataArr = {
      "zw":"Zimbabwe",
      "au":"Australia",
      "in":"india"
    };
});

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</head>
<body>
<div ng-app="myApp" ng-controller="MyCtrl">
    <span>{{ mappedDataArr['in'] }}</span>
</div>
</body>
</html>

Answer 4

To properly access country data, simply use the country code key to retrieve information from the mapped data array like mappedDataArr[key].

var app = angular.module("myApp", []);

app.controller("MyCtrl", function($scope) {
    $scope.mappedDataArr = {
      "zw":"Zimbabwe",
      "au":"Australia",
      "in":"india"
    };
});

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</head>
<body>
<div ng-app="myApp" ng-controller="MyCtrl">
    <span>{{ mappedDataArr['in'] }}</span>
</div>
</body>
</html>

What is the method to retrieve the complete name of the primary key field (country name) in Angular JS using HTML

Answer №1

Answer №2

Similar questions

Modify the color scheme of an HTML webpage

The output of the incorrect .bind() example is not as

The onload function for a JSP embedded in an IFrame was causing the IFrame to expand and fill the entire browser

Customize numbers in JavaScript with a Unity-inspired design changer

Encountering an "Unspecified Reference Error" while attempting to retrieve data from an API in your

Convert the PHP variable into a JSON object

Webpack 2.7.0 throws an error: "Unexpected parameter: theme"

Issue encountered when attempting to showcase the events in the calendar

What is the reason for jQuery's ajax feature running scripts by itself?

Get an ICS file as text using JQuery

The functionality of Angularjs ui-modal is being affected by issues related to the $http request

Adding an element within an ngFor iteration loop

The Parse-JS-SDK currently doesn't support using the objectId in the matchesKeyInQuery method

Using NodeJS to retrieve the mean price from the OPSkins pricelist

VBA Hover Clickthrough Technique

Implementing the DRY (Don't Repeat Yourself) principle across a group of related

I need PHP code to automatically add row numbers to the beginning of each row when fetching data from a MySQL database

I am currently working on obtaining images that are saved by their URL within a PHP file. These images are located within a directory named "images."

What is the process for transferring information from HTML to Python and then receiving the output in HTML?

"Encountering issues with Instagram embeds.js library failing to load