从API获取数据以创建tom-select选项

Question

我想通过从公共API获取数据来创建tom-select选项，我已经成功地获取数据并将其存储到对象中，但我未能渲染它来选择选项。

代码如下:

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

请帮我解决这个问题

我已经尝试获取数据，将其存储到对象中，并使用控制台检查值，结果如下:

[{ iso: "AF", name: "Afghanistan" }, { iso: "VE", name: "Venezuela" }, { iso: "VN", name: "Vietnam" }, { iso: "YE", name: "Yemen" }, { iso: "ZM", name: "Zambia" }, { iso: "ZW", name: "Zimbabwe" }]

如果我在这里发送所有的结果它会太长，所以我只发送其中的一部分

Answer 1

我认为这里的问题是下面的代码块在承诺解决之前被执行。将其移动到renderCourses中解决了这个问题。还有，你可以选择的地方有个小错别字。用Push代替options.push

new TomSelect('#select-junk',{
maxItems: null,
maxOptions: 100,
valueField: 'iso',
labelField: 'name',
searchField: 'name',
sortField: 'name',
options: options,
create: false
});

这应该按预期填充select

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