I’m working on a small webapp using nodeJS and express. Client-side script includes the following:
let firstList = []
fetch(`${baseUrl}canList`, {
method: 'GET'
}).then((response) => {
response.json().then((jsonResponse) => {
firstList = jsonResponse
}).catch((err) => {
console.log(`Error: ${err}`)
})
})
after fetching data for a second list, The script sets up event listeners for a text input field and a button. Next, I’m trying to use the content of the firstList in the following function:
function start() {
listBox.innerText = ''
listContainer = document.createElement('div')
listContainer.classList.add('text-container')
listBox.append(listContainer)
firstList.forEach(el => {
const div = document.createElement('div')
div.innerText = el
document.querySelector('.text-container').appendChild(div)
})
addstyle()
}
start()
My problem is that the .then( response)… handler has not executed to populate the firstList array. instead the .then only starts executing after running through the client script. So the start function iterates over an empty array
otherwise, everything works just fine after this, . The button is used to switch between presenting the first list and second list using a CSS text animation. and the input text field can be used to and an element to be currently displayed list, which is posted back to the node express app and appended to the file accessed using the fetch operations. However,because the start function runs before the array is populated neither list is displayed until the button is clicked.
I’ve tried wrapping the fetch in an async function and then using await as well as writing the fetch .then chain without using the arrow function. I only started learning JavaScript/ node/CSS about a month ago, so please forgive my awkward description