Display Country flag based on country name using AngularJS in ASP.Net

Hi rani,

To get the Flags url based on country name i have used the below Web services API.

http://www.geognos.com/geo/en/world-countries-API.html

To get the flag URL you need to pass TwoLetterISORegionName. So i have used the GetCountryCode function to get the TwoLetterISORegionName based on the country name.

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', []);
    app.controller('MyController', function ($scope, $http, $window) {
        $http.post("Default.aspx/PopulateCustomers", { headers: { 'Content-Type': 'application/json'} })
        .then(function (response) {
            $scope.Customers = response.data.d;
        }, function error(response) {
            alert(response.responseText);
        });
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Country</th>
                <th>Flag</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="customer in Customers">
                <td>{{ customer.Id }}</td>
                <td>{{ customer.Name }}</td>
                <td>{{ customer.Country }}</td>
                <td><img alt="{{customer.Country}}" ng-src="{{customer.Flag}}" style="height: 25px; width: 25px" /></td>
            </tr>
        </tbody>
    </table>
</div>

Namespaces

C#

using System.Collections.Generic;
using System.Data;
using System.Globalization;
using System.Web.Services;

VB.Net

Imports System.Collections.Generic
Imports System.Data
Imports System.Globalization
Imports System.Web.Services

Code

C#

[WebMethod]
public static List<Customer> PopulateCustomers()
{
    // Get data from Database.
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[3] { 
                    new DataColumn("Id", typeof(int)),
                    new DataColumn("Name", typeof(string)),
                    new DataColumn("Country",typeof(string)) });
    dt.Rows.Add(1, "John Hammond", "United States");
    dt.Rows.Add(2, "Mudassar Khan", "India");
    dt.Rows.Add(3, "Elizabeth Lincoln", "Canada");
    dt.Rows.Add(4, "Mathew", "Australia");

    List<Customer> customers = new List<Customer>();
    foreach (DataRow dr in dt.Rows)
    {
        customers.Add(new Customer
        {
            Id = Convert.ToInt32(dr["Id"]),
            Name = dr["Name"].ToString(),
            Country = dr["Country"].ToString(),
            Flag = "http://www.geognos.com/api/en/countries/flag/" + GetCountryCode(dr["Country"].ToString()) + ".png"
        });
    }

    return customers;
}
// Get Country Code from Country Name.
public static string GetCountryCode(string country)
{
    string countryCode = "";
    CultureInfo[] cultures = CultureInfo.GetCultures(CultureTypes.SpecificCultures);
    foreach (CultureInfo culture in cultures)
    {
        RegionInfo region = new RegionInfo(culture.LCID);
        if (region.EnglishName.ToUpper().Contains(country.ToUpper()))
        {
            countryCode = region.TwoLetterISORegionName;
        }
    }

    return countryCode;
}

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
    public string Flag { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function PopulateCustomers() As List(Of Customer)
    ' Get data from Database.
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn(2) {
                        New DataColumn("Id", GetType(Integer)),
                        New DataColumn("Name", GetType(String)),
                        New DataColumn("Country", GetType(String))})
    dt.Rows.Add(1, "John Hammond", "United States")
    dt.Rows.Add(2, "Mudassar Khan", "India")
    dt.Rows.Add(3, "Elizabeth Lincoln", "Canada")
    dt.Rows.Add(4, "Mathew", "Australia")
    Dim customers As List(Of Customer) = New List(Of Customer)()
    For Each dr As DataRow In dt.Rows
        customers.Add(New Customer With {
            .Id = Convert.ToInt32(dr("Id")),
            .Name = dr("Name").ToString(),
            .Country = dr("Country").ToString(),
            .Flag = "http://www.geognos.com/api/en/countries/flag/" & GetCountryCode(dr("Country").ToString()) & ".png"
        })
    Next

    Return customers
End Function

' Get Country Code from Country Name.
Public Shared Function GetCountryCode(ByVal country As String) As String
    Dim countryCode As String = ""
    Dim cultures As CultureInfo() = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
    For Each culture As CultureInfo In cultures
        Dim region As RegionInfo = New RegionInfo(culture.LCID)
        If region.EnglishName.ToUpper().Contains(country.ToUpper()) Then
            countryCode = region.TwoLetterISORegionName
        End If
    Next

    Return countryCode
End Function

Public Class Customer
    Public Property Id As Integer
    Public Property Name As String
    Public Property Country As String
    Public Property Flag As String
End Class

Screenshot