Design comparison
Solution retrospective
using flex box
What challenges did you encounter, and how did you overcome them?how to use json was troublesome
What specific areas of your project would you like help with?the json part
Community feedback
- @Juan122113Posted 2 months ago
Hi! Respect to the JSON part that you ask for help, here's the JSON part of my code:
fetch('./data.json') .then(response => response.json()) .then(data => { times = data; updateButtonStates(dayBtn); updateContent("daily"); }) .catch(error => console.error('Error:', error));
This JavaScript code uses the Fetch API to fetch data from a local JSON file and then update the content of a web page. Here's a detailed explanation:
-
fetch('./data.json'): Uses the fetch function to make an HTTP GET request to the data.json file located in the same folder as the current JavaScript file (indicated by ./).
-
.then(response => response.json()): This then method is executed when the fetch request is successfully resolved. The function response => response.json() takes the response and converts it into a JSON object.
-
.then(data => {...}): This second then method is executed when the JSON object is ready for use. Within the {...} block, three main tasks are performed:
- times = data;: Assigns the retrieved data stored in the data object to a variable named times.
- updateButtonStates(dayBtn);: A call to a custom function that updates the states of buttons on the web page, taking dayBtn as a parameter.
- updateContent("daily");: A call to another custom function that updates the content of the web page with daily data, passing the value "daily" as a parameter.
-
.catch(error => console.error('Error:', error)): This catch method is executed when an error occurs in the fetch request or in any of the then operations. In case of an error, the function error => console.error('Error:', error) prints an error message in the browser console.
In summary, the code fetches data from a JSON file, processes it as a JSON object, and then updates the content and button states on the web page. If any errors occur, an error message is printed in the console.
0 -
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