如何使用JSfetch()使用JSON值串列填充選擇下拉串列？

在下面的代碼段中，我嘗試使用獲取請求在選擇下拉串列中填充狀態串列。我可以從本地 json 檔案中控制狀態串列。

我能夠正確控制狀態串列，但選擇選單根本沒有填充？我沒有看到任何錯誤，我想知道我哪里出錯了？

我的 fetch 請求在語法上有什么問題嗎？

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>

uj5u.com熱心網友回復：

您應該附加選項以選擇元素，缺少代碼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>

uj5u.com熱心網友回復：

我的 fetch 請求在語法上有什么問題嗎？

你的獲取沒有錯。

您缺少的是在 forEach 回圈中附加您正在創建的節點。
這是一個示例，我正在使用 typicode 獲取某些內容的串列，因為您使用的 api 沒有通過瀏覽器 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>

uj5u.com熱心網友回復：

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>

這應該可行，并且在我看來比使用 DOM 操作函式更干凈。

標籤：javascript 获取 API

上一篇：.getBoundingClientRect()不改變滾動值

下一篇：reactjs如何區分組件實體？