API gebruiken in ReactJS

SIMON

Hi guys.

Ik ben met een react/laravel website bezig en wil een API gebruiken om data zoals restaurants, sportclubs, kroegen enzo te weergeven per stad.

Het gaat om de volgende API: https://rapidapi.com/apidojo/api/travel-advisor/
Hiervan wil ik data ophalen als iemand een specifieke stad opzoekt. Bijvoorbeeld Den Haag
Deze data wil ik daarna in dit format weergeven naast elkaar:

Hoe kan ik dit doen? Dit is namelijk voor school maar ik loop hiermee compleet mee vast en mn docenten weten niks hier vanaf.

SIMON

@"SIMON"#p2386
Om gelijk extra in te haken. Ik gebruik ook een andere API van Mapbox om een routeplanner te maken. Hij werkt deels, maar ik wil hiermee ook kunnen dat hij gelijk het adres van die gelegenheid als "naartoe" punt neerzet als je op de blauwe "Plan route" knop klikt. Hoe kan ik dit doen?

Ik weet trouwens, de css en responsivness is echt een bende. Maar ik wil liever dit eerst werkende hebben.

Dennis

Hoi Simon!

Aller eerst heel leuk dat je met ReactJS bezig bent, ik ben sinds ik bij mij nieuwe baan ben begonnen ook begonnen met leren!

Ik zie dat er in de bijgevoegde link een voorbeeld staat. Dit is eigenlijk precies wat je nodig hebt, kun je misschien iets specifieker zijn? Wil je bijvoorbeeld weten hoe je door de data heen kunt loopen en deze vervolgens kunt printen?

SIMON

Hi Dennis.

In de bijgevoegde link staat inderdaad een voorbeeld. Alleen weet ik niet waar ik in ReactJS deze code/voorbeelden moet plaatsen om te zorgen dat de output (bijvoorbeeld in een loop) hiervan in het format komt uit mijn voorbeeldfoto.

Skid

@"SIMON"#p2387

https://docs.mapbox.com/help/getting-started/directions/

Je zou het zelf een beetje moeten aanpassen naar je eigen use case. Maar in principe heb je gewoon een start punt ( huidige locatie ophalen ) en je zoek punt. Hier ga je de knop op bouwen.

SIMON

@"Skid"#p2390 zal hem bestuderen, thanks!

Weet je toevallig ook hoe ik die andere API (startpost) kan doen?

Jasper

@"SIMON"#p2391 Wat ik je zou aanraden is om in de backend van je applicatie de requests naar de API van Travel Advisor te verwerken. Ik zie dat er al erg veel snippets zijn voor verschillende programmeertalen in de documentatie, dus die zou je kunnen gebruiken.

In je frontend maak je dan gebruik van ajax requests naar je backend die dan de data vanuit de Travel Advisor API ophaalt en verwerkt.