Newbie Javascript question - Fetch in while loop

Question

My main program flow should be:

read JSON (fetch api)
do some stuff with json
repeat

The problem is I cannot do a do - while because of the asynchronous nature of the fetch api.

Basically, the main() method below should repeat infinite

My code so far:

let playbook = [];
let slideIndex = 0;
let reinitialize = true;

function main() {
    loadJSON().then(r => initializeSlideshow());
}

async function loadJSON() {
    let response = await fetch('playbook.json');

    if (response.status === 200) {
        playbook = await response.json();
    }

    playbook.sort(function (x, y) {
        return x.order - y.order;
    });
}

function initializeSlideshow() {
    playbook.forEach((photo, i) => {
        //console.log(photo);
        let div = document.createElement("div");
        div.className = "mySlides fade";
        div.style.display = "none";
        let img = document.createElement("img");
        img.src = photo.uuid;
        img.style = "width:100% height:100%";
        div.appendChild(img);
        document.querySelector(".slideshow-container").appendChild(div);
    })
    startSlideShow();
}

async function startSlideShow() {
    let slides = document.getElementsByClassName("mySlides");
    slideIndex = 0
    do {
        console.log(playbook[slideIndex].enabled)
        console.log(playbook[slideIndex].duration)
        if (playbook[slideIndex].enabled == 'true') {
            slides[slideIndex].style.display = "block";
            //setTimeout(startSlideShow, playbook[slideIndex].duration); // Change image every 2 seconds
            await new Promise(r => setTimeout(r, playbook[slideIndex].duration));
            slides[slideIndex].style.display = "none";
        }
        slideIndex++;
    }
    while (slideIndex < slides.length)
}

Can you describe why you are looking to loop the fetch method? If you are trying to keep data up to date, there is potentially a better solution required. — Squiggs.
– Squiggs., Commented Apr 27, 2021 at 8:26
the playbook.json file can be changed externally and the new content should be loaded after the slideshow is finished — Johan Vandevenne
– Johan Vandevenne, Commented Apr 27, 2021 at 8:31

Krantisinh · Accepted Answer · 2021-04-27 09:08:48Z

1

Async/Await can be used in such scenarios. The while(true) will create an infinite loop. Your main function will look something like below -

async function main() {
  while(true) {
    await loadJSON();
    await initializeSlideshow();
  }
}

async function initializeSlideshow() {
   // Logic to append images
    await startSlideShow();
}

edited Apr 27, 2021 at 9:08

answered Apr 27, 2021 at 8:37

Krantisinh

1,72915 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Keith Over a year ago

Might want to also await initializeSlideshow(),. And return startSlideShow(); in said function, or this loop is going to be constantly loading JSON.

Krantisinh Over a year ago

@Keith That's right. We should await on initializeSlideshow(). Updated the answer.

Collectives™ on Stack Overflow

Newbie Javascript question - Fetch in while loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related