All topics

How to run an additional API call for each response of an original call?

sachag

1 month ago
Hi everyone!
New Toddler here 🙂

I’m building a simple Pokédex app using the PokeAPI to get familiar with the editor before going to day 3 of the beginner course 🙂
https://copper_nute_gunray_zany_finch.toddle.site/

The app currently shows a list of the first 100 Pokémon using this API call:
https://pokeapi.co/api/v2/pokemon?limit=100

To retrieve additional details for each Pokémon, I need to run an extra API call for each entry using:
https://pokeapi.co/api/v2/pokemon/{POKEMON NAME OR ID}/

Does anyone know how I can set this up in Toddle? I haven't been able to find a solution on my own, apologies if this has already been covered somewhere else! Thanks in advance! 🙏
Stockton

1 month ago
Fat fingering on my phone but thought I’d try and answer 😅

1. API in top level component to retrieve the list of all Pokemon.
2. Your table rows should be a single component that is being repeated on the results of step 1. The component should receive as an attribute the ID of the repeated item.
3. Inside the component being repeated have another API that retrieves the specific information by the attribute ID

Hope that helps 🙂
👍1
@Stockton
Fat fingering on my phone but thought I’d try and answer 😅

1. API in top level component to retrieve the list of all Pokemon.
2. Your table rows should be a single component that is being repeated on the results of step 1. The component should receive as an attribute the ID of the repeated item.
3. Inside the component being repeated have another API that retrieves the specific information by the attribute ID

Hope that helps 🙂
sachag

29 days ago
It did, thanks! Made me learn about how components work, thank you, @Stockton !

I was able to get everything working at https://copper_nute_gunray_zany_finch.toddle.site/
I have a new issue however 🤔

If hard refresh the page, all artworks are loaded properly from their respective api calls, however if I load the page like any other one, only the last call seem to be used to display all artworks (voltorb) - any ideas??
Tod

29 days ago
Great energy @sachag! Your continuous contribution to the toddle Community just made you advance to Community Level 1!

How to run an additional API call for each response of an original call?

sachag

Stockton

sachag

Tod

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community