Design comparison
Solution retrospective
Finally, this is the last project on newbie projects (free & free+). I have finished all the 21 projects on the newbie level. I might consider doing the premium but I will not be able to upload them. After that, dive straight into the junior level.
What challenges did you encounter, and how did you overcome them?I am still working on understanding how to sort out JSON data. I did not implement it on this project, but I will after reading up on how to do it.
What specific areas of your project would you like help with?I would love assistance in understanding how data is being fetched and worked on.
Community feedback
- @kodan96Posted 6 months ago
hi there! 🙌
-
fetching an API typically means you send out an HTTP request to an API endpoint. This sometimes requires a token to the API itself, in these cases you need to include your key to the API in the request you initially send.
-
The server will send you a server response. the response can be 200 (ok) or some other, but since the only optimal outcome is the 200 response you can set your
fetch
for two outcome:
- the response was 200
- or anything else
-if its 200 you can sort the data and display it on the screen
-if its not you can throw an error and you can set up steps for trying to fetch the data again.
A general syntax looks like this:
fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
Hope this was helpful🙏
Good luck and happy coding! 💪
Marked as helpful0@Sylvester009Posted 6 months ago@kodan96 Thank you very much. I am now able to work the JSON file and I have updated the project now. It is currently using JSON file
1 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord