I have the following code, where I fetch an API and populate a container inside a function
let forms = [];
fetch('http://localhost:3000/getmenu')
.then((res) => res.json())
.then((data) => {
forms = favorites = data;
showForms(forms);
})
.catch(console.log('catch'));
function showForms(arrayForms) {
container.innerHTML = '';
arrayForms.map(
({ NUMERO, DESCRICAO, GRUPO, AUDIT_DATA }) => {
container.innerHTML = `foo`
}However, the page loads extremely fast but the results take a few seconds to show up. How can I keep the page in the loading state until the funciton is complete?
You can use ternary operator
arrayForms ? arrayForms.map(
({ NUMERO, DESCRICAO, GRUPO, AUDIT_DATA }) => {
container.innerHTML = `foo`
}) : "Loading data..."
SO I simply used a ternary operator after the map like so
container.innerHTML == '' ? console.log('not yet') : console.log('now');which reads when the map has finished. This bypasses a problem I was having where a line after map() is also be executed before map().