i want to create tom-select option by fetching data from public API, I've successfully fetching data and store it to object, but i failed to render it to select options.
here's the code:
HTML:
<div class="p-4"><select id="select-junk" placeholder="Start Typing..."></select>
</div>
JS:
async function getCourses() {
try {
let res = await fetch("https://covid19.mathdro.id/api/countries");
return await res.json();
} catch (error) {
console.log(error);
}
}
async function renderCourses() {
allCourses = await getCourses();
result = Object.assign({}, allCourses);
f = result.countries;
f.forEach (country => {
options. Push({
iso: country.iso2,
name: country.name,
});
});
}
var options = [];
renderCourses();
new TomSelect('#select-junk',{
maxItems: null,
maxOptions: 100,
valueField: 'iso',
labelField: 'name',
searchField: 'name',
sortField: 'name',
options: options,
create: false
});
please help me fix this
I've tried fetching data, store it into object, and I've checked the value using console, and here's the result:
[{ iso: "AF", name: "Afghanistan" }, { iso: "VE", name: "Venezuela" }, { iso: "VN", name: "Vietnam" }, { iso: "YE", name: "Yemen" }, { iso: "ZM", name: "Zambia" }, { iso: "ZW", name: "Zimbabwe" }]
if i sent all the result here it will too long, so i just sent some part of it
I think the issue here is that the below chunk of code gets executed before the promise resolves. Moving that into renderCourses solves the issue. Also, there was a small typo where you had options. Push
instead of options.push
:
new TomSelect('#select-junk',{
maxItems: null,
maxOptions: 100,
valueField: 'iso',
labelField: 'name',
searchField: 'name',
sortField: 'name',
options: options,
create: false
});
This should populate the select as intended
let options =[];
async function getCourses() {
try {
let res = await fetch("https://covid19.mathdro.id/api/countries");
return await res.json();
} catch (error) {
console.log(error);
}
}
async function renderCourses() {
allCourses = await getCourses();
result = Object.assign({}, allCourses);
f = result.countries;
f.forEach (country => {
options.push({
iso: country.iso2,
name: country.name,
});
});
new TomSelect('#select-junk',{
maxItems: null,
maxOptions: 100,
valueField: 'iso',
labelField: 'name',
searchField: 'name',
sortField: 'name',
options: options,
create: false
});
}
renderCourses();