function updateTranslations(response) { const translations = JSON.parse(response); document.querySelectorAll(".languageText").forEach(element => { element.textContent = translations[element.id.replace("Text", "")]; }); // Send result to romanization sever // Since this is an asynchronous opreation, there is no indication that // it's being performed in the backend. So I add the 'loading' class to the progress // bar used to track translations, and then remove it in the 'resolved' handler. const elem = document.getElementById("loading-screen") elem.classList.toggle("loading") fetch("/romanize", { method: "POST", body: response }).then((newResponse) => newResponse.json()) // It looks like response.json() returns another promise, since the _body_ of the response may not have loaded yet. Do not confuse this json() with the static Response.json() method. Since it returns another promise, I have to call .then() to actually get the result. .then((data) => { elem.classList.toggle("loading"); console.log(data); }); }