我正在嘗試從我的 API 中獲取資料，并將其放入“選項”輸入中。但我得到的只是[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'}
uj5u.com熱心網友回復：
在回圈時獲取后，您應該像下面這樣撰寫代碼
dataDays.forEach((item) => {
const selectOption = document.createElement("option");
selectOption.value = item.day;
// selectOption.id = id;
selectOption.textContent = item.day;
daysOptions.append(selectOption);
});
這里使用我從獲取的串列中訪問每個物件的專案，并且 item.day 正在獲取當天的值。
如果這解決了您的問題，請通過回復或投票告訴我。謝謝
uj5u.com熱心網友回復：
如果您使用的是 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" />轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469071.html
標籤：javascript 数组 api 目的 前锋