<table class="table table-striped table-sm small" >
<thead class="bg-dark text-light">
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Nationality</th>
<th scope="col" class="text-right"></th>
</tr>
</thead>
<tbody data-bind="foreach: records">
<tr>
<td class="align-middle" data-bind="text:DriverId"></td>
<td class="align-middle" data-bind="text:Name"></td>
<td class="align-middle">
<span id = "nation" data-bind="text:Nationality" class="float-left"> </span>
<img id="flagicon" src="" alt="" class="flag float-right float-center" />
<script>
var alpha_2_code = "pt";
/* for(let i=0; i < countrycodesobj.length ; i++){
if(countrycodes[i].Nationality === (data-bind = "text:Nationality"))
alpha_2_code = countrycodes[i].alpha_2_code;
}*/
var myPath = "https://countryflagsapi.com/png/" + alpha_2_code;
document.getElementById("flagicon").src= myPath;
</script>
</td>
</tr>
</tbody>
I want the information > data-bind="text:Nationality" < stored in a variable in script tag. Im getting the information from an api and its being handled by knockoutjs. My knockoutjs knowledge is scarce and i dont know if i can access the information data-bind="text:Nationality" in the script tags. Any solution whether in jquery , knockouts or javascript would be perfect. Thanks in advance.
you could make use of a simple function that you define before you applyBindings with knockout and after your countrycodesobj is defined, sth like:
function getFlagByNationality(n) {
var alpha_2_code = "pt";
for(let i=0; i < countrycodesobj.length ; i++){
if(countrycodes[i].Nationality == n ){
alpha_2_code = countrycodes[i].alpha_2_code;
}
}
return "https://countryflagsapi.com/png/"+alpha_2_code;
}
you can then use this in data-bind attribute:
<img src="" data-bind="attr:{src: getFlagByNationality(Nationality)}" />