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

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>

CodePudding user response：

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.

CodePudding user response：

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>

CodePudding user response：

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>