In my JSON structure has countryIds field:
[
{countryIds: [1, 35, 16]}
{countryIds: [6, 21]}
]
And in UI I want to show country flag instead of country ID.
So, for this purpose I think I can create service which will return url for icon flag:
getCountryFlagIconUrlById(countryId) {
switch(countryId) {
case 1: return "http://mySite:8080/resources/usa.png"
.....
case 200: return "http://mySite:8080/resources/russia.png"
}
But the problem is that I need to create switch-case operator for more than 200 countries.
Is there any more elegant way to do it?
In my JSON structure has countryIds field:
[
{countryIds: [1, 35, 16]}
{countryIds: [6, 21]}
]
And in UI I want to show country flag instead of country ID.
So, for this purpose I think I can create service which will return url for icon flag:
getCountryFlagIconUrlById(countryId) {
switch(countryId) {
case 1: return "http://mySite:8080/resources/usa.png"
.....
case 200: return "http://mySite:8080/resources/russia.png"
}
But the problem is that I need to create switch-case operator for more than 200 countries.
Is there any more elegant way to do it?
Share Improve this question asked Aug 11, 2014 at 10:14 WeleToWeleTo 20.6k56 gold badges176 silver badges290 bronze badges3 Answers
Reset to default 5just use a map
var countries = {
1: 'usa',
...,
200: 'russia'
};
with getCountryFlagIconUrlById as the following:
function getCountryFlagIconUrlById(id) {
return 'http://localhost:8080/resources/'+countries[id]+'.png';
}
current downside is that it does not check if the id exists, but that is a simple if statement.
For a more angular approach store your countries as a JSON map in a .factory with name value pairs for the ID and png.
Then create a custom .filter that maps the value based on the id used as input. Filter Documentation
Working Fiddle
app.factory('FlagFactory', function() {
return {
1: "usa",
2: "russia",
...
...
};
});
app.filter('flag', ['FlagFactory', function(FlagFactory) {
return function(input) {
return "http://mySite:8080/resources/" + FlagFactory[input] + ".png";
};
});
This would then be easy to implement and reusable across your whole app.
<html> Hello World {{someCountryID | flag}} </html>
Additional Note:
If you are going to use plan on using the angular model to update the src for an image tag you should use ng-src otherwise the website will try to fetch the image with the literal hash {{someimage}} before angular replaces it.
<img ng-src="{{foo | flag}}" alt="flag" />
If you're countryIds are unique [which they should be, You can rename your images accordingly and redesign your code as
getCountryFlagIconUrlById(countryId) {
return "http://mySite:8080/resources/" + countryId + ".png"
}
Another approach will be, if your json structure allows, to user country ids to get country names and fetch the images accordingly..
That is, if you have
{1 : "country1", 2: "country2"}
You can modify the method like this
getCountryFlagIconUrlById(countryId) {
return "http://mySite:8080/resources/" + countryJSON[countryId] + ".png"
}