I’m retrieving information on Municipality names, ZipCodes, etc. from a public service provider (DAWA) using AJAX. At first I had an issue retriving the data until I made the transfer asyncronous, thus ajaxGetMunicipalitiesFromDAWA
is an asyncronous function. I have checked ajaxGetMunicipalitiesFromDAWA
and it loads data correctly.
The I try to update my selectlist using the data, but it seems the update occurs before Municipalies is loaded. I have tried to make loadMunicipalities
asyncronous as well, but still I end up having an empty option list.
Please help
HTML code:
<div class="row mt-3 fw-bold">
<div class="col-3"><label asp-for="PostalAddress_Municipality">Municipality:</label></div>
<div class="col-9">
<select asp-for="PostalAddress_MunicipalityId" class="form-control form-control-sm" name="municipality"></select>
</div>
</div>
JavaScript:
var Municipalities = ajaxGetMunicipalitiesFromDAWA();
async function ajaxGetMunicipalitiesFromDAWA() {
var output = [];
var xHttp = new XMLHttpRequest();
xHttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var dawaData = JSON.parse(this.responseText);
dawaData.forEach(function (data) {
output.push({ Id: data.kode, Name: data.navn, CountryId: 53, CountryText: "Danmark", RegionId: data.regionskode, RegionText: data.region.navn });
});
}
}
xHttp.open("GET", "https://dawa.aws.dk/kommuner", true);
await xHttp.send();
return output;
}
async function loadMunicipalities() {
var select = document.querySelector("municipality");
var data = await Municipalities;
data.forEach(function (municipality) {
var option = document.createElement("option");
option.value = municipality.Id;
option.text = municipality.Name;
option.selected = select.value == municipality.Id;
select.add(option);
});
}