Issue with displaying data from an API into the HTML, pure Javascript

Question

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!

Dupe of https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call. Instead of making `candidates` a global variable, just have it as a parameter to the `addCandidatesToHtml` function, and call that function from within the axios.then part where you have access to the candidates. — James, May 29 '22 at 12:44
Seems like you main.js should be included in the body or wait for the DOM to load. — Hezi Shahmoon, May 29 '22 at 12:53

score 0 · Accepted Answer · answered May 29 '22 at 13:08

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();

return promise from getCandidates function, also make the function as async
Call getCandidates function from addCandidatedToHTMl and use await to wait till promise is resolved, once the promise is resolved you can store returned value of promise in candidates and can use it in the function

Thanks, this solved the issue! I see what problems I had, I was not accounting for the synchronous nature of JS, I've stopped writing it for some time now, been focused on other languages that are more backend focused... this worked just great, thanks again :) — Bill26, May 29 '22 at 13:28

Issue with displaying data from an API into the HTML, pure Javascript

1 Answers1