我必須為此只使用 vanilla JS，沒有 jQuery 或框架（這會讓生活更輕松）......但這是 JS 檔案：
let candidates = [];
const getCandidates = () => {
axios.get('<a certain endpoint here, the endpoint is good, that is not the problem>')
.then((response) => {
for (let i = 0; i < response.data.candidates.length; i ) {
candidates.push(response.data.candidates[i]);
}
console.log(candidates);
return candidates;
})
};
getCandidates();
function setAttributes(el, attrs) {
for(let key in attrs) {
el.setAttribute(key, attrs[key]);
}
}
function addCandidatesToHtml() {
let mainContainer = document.getElementById("candidatesGoHere");
for (let i = 0; i < candidates.length; i ) {
let label = document.createElement("label");
let who = document.createElement("input")
setAttributes(who, {
"type": "radio",
"id": candidates[i].name,
"name": candidates[i].name,
"value": candidates[i].name
})
label.setAttribute("for", candidates[i].name);
label.innerHTML = candidates[i].name;
mainContainer.appendChild(label);
mainContainer.appendChild(who);
console.log("in")
}
}
addCandidatesToHtml();
這是HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
<title>Vote</title>
</head>
<body>
<form id="candidatesGoHere" action="" class="form-control">
</form>
</body>
</html>
問題是回圈似乎沒有運行！不知道為什么會這樣，花了很多時間研究和嘗試不同型別的回圈，但一無所獲。
先感謝您！
uj5u.com熱心網友回復：
更改您的代碼如下
const getCandidates = async () => {
let candidates = [];
return axios
.get(
"<a certain endpoint here, the endpoint is good, that is not the problem>"
)
.then((response) => {
console.log(response);
for (let i = 0; i < response.data.candidates.length; i ) {
candidates.push(response.data.candidates[i]);
}
console.log(candidates);
return candidates;
});
};
function setAttributes(el, attrs) {
for (let key in attrs) {
el.setAttribute(key, attrs[key]);
}
}
async function addCandidatesToHtml() {
const candidates = await getCandidates();
let mainContainer = document.getElementById("candidatesGoHere");
for (let i = 0; i < candidates.length; i ) {
let label = document.createElement("label");
let who = document.createElement("input");
setAttributes(who, {
type: "radio",
id: candidates[i].name,
name: candidates[i].name,
value: candidates[i].name,
});
label.setAttribute("for", candidates[i].name);
label.innerHTML = candidates[i].name;
mainContainer.appendChild(label);
mainContainer.appendChild(who);
console.log("in");
}
}
addCandidatesToHtml();
- 從 getCandidates 函式回傳承諾，也使函式異步
- 從 addCandidatedToHTMl 呼叫 getCandidates 函式并使用 await 等待 promise 被解決，一旦 promise 被解決，您可以將 promise 的回傳值存盤在候選人中并可以在函式中使用它
uj5u.com熱心網友回復：
這仍然是經典的 JavaScript 錯誤。您在承諾中獲取資料，但模塊中的其余代碼都沒有考慮到這一點。
執行 addCandidatesToHtml 時，候選陣列為空。getCandidates 中的承諾尚未解決。
只需等待承諾解決：
getCandidates().then(addCandidatesToHtml)
除此之外，您的代碼很難閱讀。如果 getCandidates 回傳一個陣列，則無需在頂級范圍內宣告候選陣列。考慮將陣列作為引數添加到 addCandidatesToHtml 函式。
沒有圖書館會讓你更容易做到這一點。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/482180.html
標籤：javascript html 循环
上一篇：Javascript在另一個第二個陣列的位置迭代第一個陣列的元素
下一篇：R計數器不計算整數（0）