1

I am using the Thunder Client app for VS code to use an API to save the user's data. The API is okay but there is something wrong with my code because I keep getting a 400 "Bad Request" error when I try to send the data to the API. I think the problem might be an array in my code and that is not being sent correctly.

const form = document.querySelector('.form');
const refresh = document.querySelector('.refresh-button');
export const scores = [];


renderScores();

// event listener
form.addEventListener('submit', (e) => {
  e.preventDefault();
  saveScore();
  renderScores();
});

refresh.addEventListener('click', (e) => {
  e.preventDefault();
  getScores();
  renderScores();
});

function renderScores() {
  const scoreList = document.querySelector('.result-list');
  scoreList.innerHTML = '';
  scores.forEach((score) => {
    const li = document.createElement('li');
    li.innerHTML = `${score.user} : ${score.score}`;
    scoreList.appendChild(li);
  });
}

async function getScores() {
  const savedScores = 'https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/Zl4d7IVkemOTTVg2fUdz/scores/';
  const recievedScores = await fetch(savedScores);
  const api = await recievedScores.json();
  const scores = api.result;
  renderScores(scores);
}

async function saveScore() {
  const user = document.querySelector('.fullname').value;
  const score = document.querySelector('.thescore').value;
  const newScore = {
    user,
    score,
  };
  scores.push(user, score);
  await fetch('https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/Zl4d7IVkemOTTVg2fUdz/scores/', {
    method: 'POST',
    body: JSON.stringify({
      newScore
    }),
    headers: {
      'Content-type': 'application/json; charset=UTF-8',
    },
  });
getScores();
}

Hey guys I changed my code a little and now I am not getting an error but when I refresh my page I lose all the data

David630
  • 37
  • 5
  • Error 400 usually refers to bad URL. Check if your URL is okay. This has a very good discussion on 400: https://stackoverflow.com/questions/19671317/400-bad-request-http-error-code-meaning – tired and bored dev Oct 26 '22 at 17:56
  • @tiredandboreddev I updated my code a little and now I am not getting any errors but when I reload my page I lose all the data but I am not getting any errors from the API – David630 Oct 26 '22 at 17:58
  • You dont call `getScores` at the root so it wont run that function on load. – adsy Oct 26 '22 at 18:02
  • You should also not call `renderScores();` in the submit and click listeners. It doesnt make sense, as it doesnt wait first for the result of `getScores` so it will just load blank data. `getScores` calls `renderScores();` anyway (after awaiting properly). So just get rid of `renderScores` in the event handlers, and replace the top level `renderScores();` with `getScores();` – adsy Oct 26 '22 at 18:03
  • @adsy that works but when I refresh I lose all the data... I am not sure how to save that because I am not using local storage only the API – David630 Oct 26 '22 at 18:10
  • Ah i see the problem. As well as above `function renderScores() {` should be `function renderScores(scores) {` – adsy Oct 26 '22 at 18:32
  • I would probably get rid of the top level `export const scores = [];` if I were you. Its better to pass it around than have a global var. If you really need them to be accessible from another file you'd instead export the `getScores` function and call it in the consumer. – adsy Oct 26 '22 at 18:48

0 Answers0