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

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/[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="" >

</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!

CodePudding user response：

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

CodePudding user response：

This is still the classic JavaScript error. You fetch your data in a promise but none of the rest of the code in your module accounts for that.

The candidates array is empty when addCandidatesToHtml is executed. The promise in getCandidates hasn't yet resolved.

Just wait for the promise to resolve:

getCandidates().then(addCandidatesToHtml)

Besides that your code is very hard to read. If getCandidates returns an array no need to declare a candidates array in the top level scope. Consider adding the array as an argument to the addCandidatesToHtml function.

No library was going to make this easier for you.