如何使用JS fetch()用JSON值列表填充选择下拉列表

Question

在下面的代码段中，我试图使用提取请求在选择下拉列表中填充状态列表。我可以从本地json文件中控制状态列表。

我可以正确地控制状态列表，但选择菜单根本没有填充？我没有看到任何错误，我想知道我哪里错了？

我的获取请求在语法上有问题吗

const states = document.getElementById('states');
states.innerHTML = '<option value="" disabled selected>Select State</option>';
fetch('https://jarednewnam.com/test/states.json')
.then(res => res.json())
.then(res => {
if (res.status) {
res.data.forEach(state => {
const option = document.createElement('option');
option.value = state.abbr;
let node = document.createTextNode(state.state)
option.appendChild(node);
states.appendChild(option);
});
}
});

<select name="states" id="states"></select>

Answer 1

/*
let statesSelect = document.getElementById('states');
let newDefault = new Option('Select State', null, true, true)
newDefault.disabled = true
statesSelect.add(newDefault)
fetch("https://jarednewnam.com/test/states.json")
.then((res) => res.json())
.then((data) => {
const { states } = data;
states.forEach((state) => {
let option = new Option(state.name, state.abbreviation);
statesSelect.add(option);
});
});
*/      
let todos = document.getElementById('placeholder');
let newDefault1 = new Option('Select todo', null, true, true)
newDefault1.disabled = true
todos.add(newDefault1)
fetch('https://jsonplaceholder.typicode.com/todos')
.then(res => res.json())
.then(data => {
data.forEach(todo => {
let option = new Option(todo.title, todo.id)
console.log(option)
todos.add(option)
});
});

<!--<select name="states" id="states"></select> <p>your select</p>-->
<select name="placeholder" id="placeholder"></select>

这应该有效，而且在我看来比使用DOM操作函数更干净。

对于后来阅读它的人来说，注释掉的部分是对他的问题的具体回答，有他的数据，但这些数据已经不存在了，所以我注释掉了。

Answer 2

您应该附加选项来选择元素，缺少代码states.appendChild(option);

const states = document.getElementById('states');
states.innerHTML = '<option value="" disabled selected>Select State</option>';
fetch('https://jarednewnam.com/test/states.json')
.then(res => res.json())
.then(res => {
console.log(res)
if (res.status) {
res.data.forEach(state => {
const option = document.createElement('option');
option.value = state.abbr;
option.innerHTML = state.state;
states.appendChild(option);
});
}
});

<select name="states" id="states"></select>

Answer 3

我的获取请求在语法上有问题吗？

您的获取没有任何问题。

缺少的是附加在forEach循环中创建的节点
这里有一个例子，我使用typicode来获得一些东西的列表，因为你使用的api没有通过SO的浏览器cors预检，但我认为你应该明白这一点：

const states = document.getElementById('states');
states.innerHTML = '<option value="" disabled selected>Select State</option>';
fetch('https://jsonplaceholder.typicode.com/todos')
.then(res => res.json())
.then(res => {
console.log(res)

res.forEach(state => {
const option = document.createElement('option');
option.value = state.id;
option.innerHTML = state.title;
states.append(option)
});
});

<select name="states" id="states"></select>