javaScript function returns empty list when called in "if" statement

Question

I am trying learn JavaScript and am making a version of the game 2048 for practice. My instructor has set up an api for us to save high scores to. I created a function to do this, as well as one to list the high scores. They work individually, but when I tried to call them under the same button, they do not work.

The function to get the scores is:

var GetHighScores = function () {
  scoreList = [];
  fetch("https://highscoreapi.herokuapp.com/scores").then(function (response) {
    console.log("Scores received. Status:", response.status);
    return response.json();
  }).then(function(data){
    //find the list
    var list = document.querySelector("#highScores");
    list.innerHTML="";
    data.forEach(function (entry) {
    //create a list item
    var item = document.createElement("li");
    //populate the list item
    item.innerHTML = entry.name + ": " + entry.score;
    //append te item to the list
    list.appendChild(item);
    scoreList.push(entry.score);
    });

    console.log(scoreList);
  });
  return scoreList;
};

And the combined function to pull in the high scores and post the users score (if it is in the top ten) is:

var submitScore = function () {
  GetHighScores();
  var leaderBoard = GetHighScores();
  var threshold = parseInt(leaderBoard[0]);
  console.log(leaderBoard);
  if (score >= threshold) {
    var initials = prompt("Enter Your Initials:");
    fetch("https://highscoreapi.herokuapp.com/scores", {
      method: "POST",
      headers: new Headers({
        "Content-type": "application/json"
      }),
      body: JSON.stringify({
        name: initials,
        score: score
      })
    }).then(function (response) {
      console.log("Score submitted.  Status: ", response.status);
      console.log(score);
      console.log(leaderBoard[9]);
    });
  } //end of if
};

Is there something simple that I am missing here?

@JaromandaX it wasn't about jQuery at all, revalidate polyfills — FieryCat, Jun 14 '17 at 06:50
I didn't say the question has no jQuery in it, I said `fetch` has nothing to do with jQueery - fetch returns a **Promise**, which has no `success` property to use instead of `.then` — Jaromanda X, Jun 14 '17 at 06:51
@JaromandaX just check that one: `view-source:https://mdn.github.io/fetch-examples/fetch-response/` Under success it was meant a Response object with status:200 on board. Ployfills was meant because IE do not support fetch, and they do have `success` — FieryCat, Jun 14 '17 at 06:55
@FieryCat - a) epic link fail and b) you said use success instead of then ... then is a promise method, promise has no success method - ergo, you are still wrong — Jaromanda X, Jun 14 '17 at 06:57
IE does **not** have success - the polyfill for fetch on IE requires a Promise polyfill as well ... and ... bingo bango bongo ... the (polyfill) promise returned by the (polyfill) fetch has no method called success to use instead of then — Jaromanda X, Jun 14 '17 at 06:58

javaScript function returns empty list when called in "if" statement

0 Answers0