Fetching data from API to create tom-select options

Question

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

Answer 1

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();