I must use only vanilla JS for this, no jQuery or frameworks (which would make life much easier)... But here's the JS file:
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();
And here's the 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/bootstrap@5.2.0-beta1/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>
The problem is that the loop seems to not run! Can't figure out why that would be, spent lots of time researching and trying different types of loops, and nothing.
Thank you in advance!
Change your code as follows
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();