Statements are not running sequentially in JavaScript

Question

When I run the following searchSessionData function, the log statements gets printed in the following order - 1,3,4,5,2 instead of 1,2,3,4,5.

Overview:

searchSessionData basically finds unseen dates range and then using that range it calls the fetchData function and then it just prints in the console.

fetchData uses the dates and fetches data and pushes all of them to a dataMap => it is a map and returns the data back

async function searchSessionData(sdate,edate){
    var data;
    // get range
    var unseenDates=getUnseenDates(new Date(sdate),new Date(edate));
    unseenDates.forEach( range => {
         fetchData(range.start,range.end);
    });
    // weave all data
    console.log(3);
    data=[];
    var allDatesinrange= getAllDates(new Date(sdate), new Date(edate));
    console.log(4);
    printElements(allDatesinrange);
    console.log(5);
}

// fetch data from the API and stores it to the hashmap
const fetchData = async(sdate='', edate='')=>{
    try {
        // console.log('fetching...')
        var response;
        var data;

        // send requests to fetch data from api
        console.log(1);
        response = await fetch(`${APOD_url}${api_key}${startDate}${sdate}${endDate}${edate}`)
        currentDataIndex=0;
        data = await response.json();
        //if data is array, enter data to map for each entry
        // console.log(dataMap);
        data.forEach(async element => {
            await dataMap.set(element.date),element);
        });
        console.log(2);

        return data;
    } catch (error) {
        console.log(error)
        return 
    }
}

Anyone know what the issue is and how can it be solved? I am not quite sure but I think it could be due to the promises.

You didn't show enough code to reproduce the problem. In particular `searchSessionData` is never called anywhere (the bug might be at the call site) — user202729, Aug 15 '21 at 02:02
Although the bug is likely [javascript - Using async/await with a forEach loop - Stack Overflow](https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop) — user202729, Aug 15 '21 at 02:03
I see. So **when you call `searchSessionData`** (write this part explicitly!), the logged content is as you written in the question? — user202729, Aug 15 '21 at 02:04
Okay, then the bug is definitely that (and also you miss an `await` for `fetchData` function call) — user202729, Aug 15 '21 at 02:05
@user202729 Yes.. i think you are right... Thanks for linking me to that question! — user14283908, Aug 15 '21 at 02:09

score 0 · Answer 1 · answered Aug 15 '21 at 02:05

0

instead of

    unseenDates.forEach( range => {
         fetchData(range.start,range.end);
    });

Try

    for (const range of unseenDates) {
         await fetchData(range.start,range.end);
    }

answered Aug 15 '21 at 02:05

async await

1,967
1
8
19

Yeah, I thought for each is the same as for..of just a different syntax... but i was wrong...thanks! :) – user14283908 Aug 15 '21 at 02:13

score 0 · Accepted Answer · answered Aug 15 '21 at 02:17

You're doing wrong in two places

fetchData is an async function but you are calling it normally in searchSessionData
.forEach loop doesn't work with async/await combo and you're using it in two places.

To fix this and make need to change you two .forEach functions like below:

for ( range of unseenDates ) {
     await fetchData(range.start,range.end);
};

for ( element of data ) {
    await dataMap.set(element.date),element);
};

You might even consider using a await Promise.all function if the functions in loops don't need to fire in sequence.

Statements are not running sequentially in JavaScript

2 Answers2