如何在 API 的 HTML 中显示选项输入

Question

我正在尝试从我的 API 中获取数据并将其放入 'option' 输入中。但我得到的只是 [object Object]。我想得到星期几。

const daysOptions = document.querySelector("#days");

const getData = async (url) => {
  try {
    const res = await fetch(url);
    const data = await res.json();

    if (data.length > 0) {
      return data;
    }
  } catch (err) {
    alert(err);
  }
};

const createOptions = async () => {
  const dataDays = await getData("http://localhost:8080/v1/days/getdays");
  console.log(dataDays);

  dataDays.forEach((day) => {
    const selectOption = document.createElement("option");
    selectOption.value = day;
    // selectOption.id = id;
    selectOption.textContent = day;
    daysOptions.append(selectOption);
  });
};

createOptions();

我正在获取的是：

0: {id: 1, day: 'Monday'}
1: {id: 2, day: 'Tuesday'}
2: {id: 3, day: 'Wednesday'}
3: {id: 4, day: 'Thursday'}
4: {id: 5, day: 'Friday'}

Answer 1

当你循环获取后，你应该像下面这样编码

dataDays.forEach((item) => {
  const selectOption = document.createElement("option");
  selectOption.value = item.day;
  // selectOption.id = id;
  selectOption.textContent = item.day;
  daysOptions.append(selectOption);
});

这里使用我从获取的列表中访问每个对象的项目，item.day 正在获取当天的值。

如果这解决了您的问题，请回复或点赞让我知道。谢谢

Answer 2

如果您使用的是 React js，那么您可以使用此代码。

const Days = () => {
  const days = [
    { id: 1, day: "Monday" },
    { id: 2, day: "Tuesday" },
    { id: 3, day: "Wednesday" },
    { id: 4, day: "Thursday" },
    { id: 5, day: "Friday" },
    { id: 5, day: "Saturday" },
    { id: 5, day: "Sunday" },
  ];
  return (
    <div>
      <select name="days" id="">
        {days.map((day) => (
          <option key={day.id} value={day.day}>
            {day.day}
          </option>
        ))}
      </select>
    </div>
  );
};

ReactDOM.render(
  <div>
    DEMO
    <Days />
  </div>,
  document.getElementById("rd")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="rd" />

如何在 API 的 HTML 中显示选项输入

How do I display option inputs in HTML from API

javascript

arrays

api

foreach

object