Debo usar solo Vanilla JS para esto, no jQuery o frameworks (lo que haría la vida mucho más fácil)... Pero aquí está el archivo 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();Y aquí está el 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>¡El problema es que el bucle parece no funcionar! No puedo entender por qué sería eso, pasé mucho tiempo investigando y probando diferentes tipos de bucles, y nada.
¡Gracias de antemano!
Cambia tu código de la siguiente manera
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();