How to populate a select dropdown with a list of JSON values using JS fetch()?

Millhorn 0
Viewed 64

In the snippet below, I'm trying to populate a list of states in a select dropdown using a fetch request. I'm able to console the list of states from a local json file.

I am able to console the list of states properly, but the select menu is not populating at all? I don't see any errors and I'm wondering where I went wrong?

Is there something wrong with my fetch request syntactically?

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>

fetch-api javascript
3 Answers

You should append options to select element, missing code 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>

Scario Eva0

Is there something wrong with my fetch request syntactically?

Nothing wrong with your fetch.

What you're missing is attaching the nodes you're creating inside the forEach loop.
Here's an example, I'm using typicode to get a list of something since the api you used doesn't pass browser cors preflight for SO, but I think you should get the point:

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>

maioman0 

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.log(option)
        todos.add(option)
      });
  });
<select name="states" id="states"></select> <p>your select</p>
<select name="placeholder" id="placeholder"></select> <p>placeholder data</p>

This should work and is in my opinion cleaner than doing it with DOM manipulation functions.

TD3V0
Related