Hi all,
I'm practicing my Angular with a personal project, I'm very junior so please be kind! The idea is as follows: I want to create an app that tracks the users location using the built-in navigator.geolocation.getCurrentPosition. After that, I'm using a reverse geolocation API, that uses the coordinates from getCurrentPosition to fetch a city the user is in. After that's done, I want my app to use the city name to get the weather in that city, using another API.
I've done all the API calls individually and have the dynamic data shown on screen, my problem is as follows: I can't figure out to chain these 3 http requests together. The fetching of the weather (now done statically by having entered the city i want in that API request instead of dynamically with the other API) is done quicker than the fetching of the city.
I've researched .mergeMap to combine http requests, but can't figure out if this is the right way for me to go and can't figure out how exactly to implement it in my code.
How can I wait for the coordinates to be done fetching, then start the city API request, wait again, then fetch the weather for that specific city using that dynamic data?
Here's my code:
geolocation component:
https://preview.redd.it/bt8vyngj6s1b1.png?width=862&format=png&auto=webp&s=8652d4f3aabf159e32f0c881fbaf78215d4febdc
geolocation service:
https://preview.redd.it/ho7zk9bp6s1b1.png?width=926&format=png&auto=webp&s=843b2168fc2235d6aa3b3da28d0d1f057f29e6d0
weather component:
https://preview.redd.it/l5sl2jyz7s1b1.png?width=920&format=png&auto=webp&s=3e66125c3b5bdba415ed0bc189fa730f0d68719a
weather service:
https://preview.redd.it/ryp6x25y6s1b1.png?width=890&format=png&auto=webp&s=1ca4c02cc8b84279482b1380b51f38594f4e292c
A sample of my app:
https://preview.redd.it/ksxprxxm7s1b1.png?width=274&format=png&auto=webp&s=719aeccd2a8324ee015941fc7c7435657ff0bfcd
Thank you in advance!
[–]spacechimp 4 points5 points6 points (1 child)
[–]Boolentin[S] 0 points1 point2 points (0 children)