loop through mapbox getDirections to populate a route array - reactjs

Question

I am trying to loop through an array called directions each index containing two arrays, latitude at index 1 and longitude at index 0 and add the results from the mapbox.getDirections to a route array to plot a route on the map. Below is my code:
I believe I am facing synchronicity issues and mapbox.getDirections callback doesn't respond in time, so I am getting weirdness routes, if the route is greater than 1.
for (let i = 0; i < directions.length - 1; i++) {
let fromIndex = i;
let toIndex = fromIndex + 1;
let directionParams = [
{ latitude: directions[fromIndex][1], longitude: directions[fromIndex][0] },
{ latitude: directions[toIndex][1], longitude: directions[toIndex][0] }
]
let self = this;
mapbox.getDirections(directionParams, getDirectionsParams).then(function (results) {
let routes = results.entity.routes[0].geometry.coordinates;
let newRoute = self.state.route.concat(routes);
self.setState({
route: newRoute,
})
});
}
This method is supposed to be array-size agnostic, so if the array is 4 indices, it will extract the directions from index 0 to 1, 1 to 2, 2 to 3, therefore displaying 3 routes in total.

Answer 1

Separate the logic, you can move the promises outside of the loop, and resolve them all together with Promise.All
const yourFunction = async () => {
const arrayOfDirections = [];
for (let i = 0; i < directions.length - 1; i++) {
const fromIndex = i;
const toIndex = fromIndex + 1;
const directionParams = [
{ latitude: directions[fromIndex][1], longitude: directions[fromIndex][0] },
{ latitude: directions[toIndex][1], longitude: directions[toIndex][0] }
];
arrayOfDirections.push(directionParams);
}
const promises = [];
arrayOfDirections.forEach((directionParams) => {
promises.push(mapbox.getDirections(directionParams, getDirectionsParams));
});
const arrayOfresults = await Promise.all(promises);
// here you have array of results returned by your promises
};