this is my function to retrieve information of Nationality , turn it into an alpha2code(eg. "US" , "BR") and then get an imgURL based on that alpha2code (works with the countryflagsapi). I know the function is correct.The problem is i call this function on HTML , and it said that it cant find .alpha_2_code because nation is undefined. JS code:

self.flagUrl =  ko.computed(function(){
        //var txt = data;
        // console.log(txt);
        // var nation = this.records[idx].Nationality;
        //var idx = data;
        //var obj = self.records[idx].Nationality;
        var nation = self.Nationality;
        console.log(nation);        
        var alpha2code = countries.filter((country) => country.Nationality === nation)[0].alpha_2_code;

        
        //console.log(c);
        
        var myPath = "https://countryflagsapi.com/png/" + alpha2code;
        
        return myPath;   
           
          
          
    }, self);

HTML code:

<tr class="row">
                <th class="col-md-2">Nationality</th>
                <td class="col-md-10" data-bind="text: Nationality"></td>
                <td><img  src="" alt="" height=25px width=40px data-bind="attr:{src: flagUrl()}" ></img></td>
            </tr>

The HTML is getting the Nationality data right on here , but it doesnt assign it to the viewmodel.

pls help .