Uses the fetch function to make an HTTP GET request to a specified URL. The URL includes the game name from the input, and encodeURIComponent is used to encode special characters in the URL.
.then(response => response.json())
Chain a then callback to the fetch promise. This callback converts the response to JSON format. The fetch function returns a Promise, and when the HTTP request is successful, the response is passed to this callback.
.then(data => {...})
Another then callback that processes the parsed JSON data. Inside this callback, existing comments in the 'comments' div are cleared, and new comment elements are created based on the fetched data.
However, if we were to look at it in a simplistic perspective, it would be much easier to understand. Shown in the console, we have our fantasy comments fetching data from the backend from the comments we stored.
Debugging backend:
As our data is stored in the backend, each comment is stored and then when "current" is typed above the "Load Comments button", it will load out all the stored comments. In the photo above, we can see that local variables are stored and each comment is numbered.
In this piece of code, The getCommentsByGameName method in the CommentService class is designed to retrieve and return a list of comments associated with a specific game. It takes a game name as a parameter, and internally calls a corresponding method on the commentRepository. This repository method is likely using Spring Data JPA query derivation, querying the database to fetch comments for the specified game name and ordering the results by timestamp in ascending order. The method returns a list of Comment entities, providing a convenient way to access and display comments related to a particular game in a chronological order.
We can see that right after we went through the debugging process, our comment of "test" loads and we are able to see that the comment section works.
Original Debugging Feature:
Originally, I decided to try to debug the feature that I created (tracking NBA players stats in the current 2023-2024 season). It didn't go as planned because the API changed and the backend can't pull the data from the API. Therefore, if no data is being pulled from the API, that means the data can't be pulled to the frontend. Essentially, I COULD debug it step by step but I need to add additional code because the new API requires a API key. Well, it wouldn't really work but it could still be debug.
Glows:
Opening Console, Finding Code, and Debugging Front End:
I'm good at using the console to find and fix issues in the front-end. It's like figuring out what's wrong with a website.
Grows:
I'm working on getting better at fixing things on the server side
I'm learning about the backend, like where different parts of the website connect
Setting breakpoints helps me understand the code better
I'm figuring out how to make different parts of the web talk to each other without any issues, like dealing with CORS errors
Overall, learning about debugging is something that I did not expect to need. It is a strong option for me in the future and I think, especially when it comes to CORS errors, it helps me figure out why the errors even exist instead of asking ChatGPT or my mom.
Debugging Comment Section of our project:
Frontend fetch:
3 Key Lines highlighted (Detailed):
Uses the fetch function to make an HTTP GET request to a specified URL. The URL includes the game name from the input, and
encodeURIComponentis used to encode special characters in the URL.Chain a
thencallback to the fetch promise. This callback converts the response to JSON format. Thefetchfunction returns a Promise, and when the HTTP request is successful, the response is passed to this callback.Another
thencallback that processes the parsed JSON data. Inside this callback, existing comments in the 'comments' div are cleared, and new comment elements are created based on the fetched data.However, if we were to look at it in a simplistic perspective, it would be much easier to understand. Shown in the console, we have our fantasy comments fetching data from the backend from the comments we stored.
Debugging backend:
As our data is stored in the backend, each comment is stored and then when "current" is typed above the "Load Comments button", it will load out all the stored comments. In the photo above, we can see that local variables are stored and each comment is numbered.
In this piece of code, The
getCommentsByGameNamemethod in theCommentServiceclass is designed to retrieve and return a list of comments associated with a specific game. It takes a game name as a parameter, and internally calls a corresponding method on thecommentRepository. This repository method is likely using Spring Data JPA query derivation, querying the database to fetch comments for the specified game name and ordering the results by timestamp in ascending order. The method returns a list ofCommententities, providing a convenient way to access and display comments related to a particular game in a chronological order.We can see that right after we went through the debugging process, our comment of "test" loads and we are able to see that the comment section works.
Original Debugging Feature:
Originally, I decided to try to debug the feature that I created (tracking NBA players stats in the current 2023-2024 season). It didn't go as planned because the API changed and the backend can't pull the data from the API. Therefore, if no data is being pulled from the API, that means the data can't be pulled to the frontend. Essentially, I COULD debug it step by step but I need to add additional code because the new API requires a API key. Well, it wouldn't really work but it could still be debug.
Glows:
Grows:
Overall, learning about debugging is something that I did not expect to need. It is a strong option for me in the future and I think, especially when it comes to CORS errors, it helps me figure out why the errors even exist instead of asking ChatGPT or my mom.