Paths tables create but they're wrong

[KaitlinJKelley]

Ticket MUST be completed before getting help from an instructor

Name: Kaitlin

Breakout Room:

Have you searched the other issue tickets? If not, do that first.

• [X ] Yes
• If No, stop and search.

REQUIRED Add Tags to Issue Ticket and Assign to Project Board

• [X ] Added to c46 Help-Thread project board
• [ ] Added the Blocker label if this is stoping you from moving forward

REQUIRED Describe your issue:

I'm trying to create a Paths table that contains both route name and lat/long for that route. The problem is if I do it using Promise.all the 2 arrays are different lengths and I don't know how to associate the correct ones to each other. If I do it another way where everything is part of a map, then the correct items are associated but are returned out of order.

REQUIRED Copy/paste any error messages that appear:

REQUIRED What have you googled? (You must have at least 3 links related to your issue)

• [ ] 1. https://stackoverflow.com/questions/24586110/resolve-promises-one-after-another-i-e-in-sequence
• [ ] 2. https://stackoverflow.com/questions/62220491/using-async-await-vs-promise-all-with-for-loops
• [ ] 3. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

REQUIRED: What have you tried? Tell us everything you have tried.

Tried promise.all and keeping everything in a map. Am considering trying to capture each return from fetch call to see if I can associate street name to lat/long at each promise fulfillment. Trying to look at asynchronous/await but I've never used it so it's kind of confusing. If that doesn't work, I want to consider changing my ERD so that paths don't need street names.

REQUIRED: Copy/paste link TO THE FILE on your branch that you are having issues with

Your link: https://github.com/kjk1325/all-clear/blob/kk-paths-table/src/components/paths/PathsProvider.js

Code Snippet

return getLatLong(streetName)

                            .then(options => {
 const splitOrigin = origin.split(" ")
                                    const splitDestination = destination.split(" ")

                                    const originCity = splitOrigin.splice(-3, 1)
                                    const destinationCity = splitDestination.splice(-3, 1)
options.items.forEach(item => item.title.toLowerCase().includes(`${originCity[0].toLowerCase()}`) ||
                                        item.title.toLowerCase().includes(`${destinationCity[0].toLowerCase()}`) ? newRoutePath.latLong = (Object.values(item.position)) : item)
                                    Promise.all(getLatLong(streetName)) .then(() => {
                                    })
                                    if (newRoutePath.latLong !== "") {
                                        newRoutePath = {
                                            streetName: streetName,
                                            latLong: newRoutePath.latLong,
                                            routeId: newRoute.id,
                                            order: newRoutePath.order++
                                        }

                                        postRoutePath(newRoutePath)
                                    }Ï

[KaitlinJKelley]

Refactored to add placeholder of empty string when there is no matching street, so the arrays stay the same length; also added async/await and timer function to prevent Connection Refused error when posting tables.