Как заполнить раскрывающийся список выбора списком значений JSON с помощью JS fetch()?
В приведенном ниже фрагменте я пытаюсь заполнить список состояний в раскрывающемся списке выбора с помощью запроса на выборку. Я могу вывести список состояний из локального файла 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>Я обновил свой OP, включив в него некоторые живые данные json. Можете ли вы объяснить, что вы имели в виду в б) лучше?
Вы создаете кучу <option>. Но где в вашем коде вы на самом деле добавляете к <select>? Вы ожидаете, что это произойдет волшебным образом?
Магия, нет! Я полагаю, что именно здесь я потерялся.
Почему бы не использовать для этого конструктор Option и функцию select dom element .add?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы должны добавить параметры для выбора элемента, отсутствующий код 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.info(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>Если это то, что мне не хватает, почему не заполняется список штатов?
проверьте журналы, есть проблема CORS
к вашему сведению: это не может работать. res.data недействителен во втором случае, тогда вы просто получаете данные ответа и ничего более, только содержимое тела ответа. И поскольку мы основаны на обещаниях, нет необходимости проверять состояние запроса.
Можете ли вы помочь мне заставить его работать? Я не уверен, куда идти.
Что-то не так с моим запросом на выборку синтаксически?
Ничего плохого в твоей добыче.
Чего вам не хватает, так это присоединения узлов, которые вы создаете, внутри цикла forEach.
Вот пример: я использую typicode, чтобы получить список чего-то, так как API, который вы использовали, не проходит предварительную проверку браузера для SO, но я думаю, вы должны понять:
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.info(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>Вы говорите ему, что нет ничего плохого, но в своем ответе вы просто молча меняете синтаксис второго, а затем из выборки да, что-то не так, он пытается получить доступ к свойству, которого нет на данный момент.
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); //idk the right way you want to display it recommend looking at the docs for this.
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) //idk the right way you want to display it recommend looking at the docs for this.
console.info(option)
todos.add(option)
});
});<select name = "states" id = "states"></select> <p>your select</p>
<select name = "placeholder" id = "placeholder"></select> <p>placeholder data</p>Это должно работать и, на мой взгляд, чище, чем делать это с функциями манипулирования DOM.
Но список штатов не заполняется. Почему? Файл JSON: https://jarednewnam.com/test/states.json.
CORS блокирует его, если он просто не работает в stackOverflow
Локально тоже не работает. И я не использую внешний URL.
Это сработало, потому что выборка была неправильной, как и синтаксис в вашем исходном, вы используете его, поэтому вам не нужно проверять статус, вы даже не можете получить там только данные ответа.
Я дословно скопировал ваше решение и заменил его своим локальным файлом json (/data/DATA_States.json), но содержимое не загружается.
Имеет ли локальный файл точно такую же файловую структуру, как та, которую мы используем в этих решениях, например ту, которую вы загрузили?
Да. Посмотреть файл можно здесь. Я использую его локально, но это структура.
Давайте продолжим обсуждение в чате.
Что не так с вашим кодом, так это то, что а) в HTML-элементах нет свойства
innerContent, вы, вероятно, думаете оtextContent, и б) вы не прикрепляете созданные вамиoptionэлементы к элементу select (states). Не стесняйтесь удалять свой вопрос, когда закончите :)