Design comparison
Solution retrospective
Im having trouble trying to connect json file to javascript can anyone help me out please
Community feedback
- @elaineleungPosted about 2 years ago
Hi Brannon, I'm looking at your code in the inspector and also your repo; I see that in the
script
, you haveindex.js
in thesrc
, but in your repo, I can't seem to findindex.js
, and your JS file seems to be namedindex - Copy.js
.In your JS file, I see a few things in the fetch method that you might be able to change:
-
Instead of
fetch("/data.json")
, tryfetch("./data.json")
instead, since just using the slash would point you to the root directory. -
I'm not sure whether you got your code to work, but I see that in your JS, you have
const articles = document.querySelector("article")
, which technically only gets the first article element, not all the article elements! To get all the article elements, try usingdocument.querySelectorAll("article")
. -
In the HTML, I'm see that you have used
section
elements, and within each section, you havearticle
. This could be quite confusing for the screen reader (actually I'm confused too); I suggest that if you do need to use one of these, then I'd choosearticle
. About usingarticle
orsection
, this very long but informative CSS-tricks article might interest you. -
In the promise you get with
.then()
, I see that after getting the promise, you have a.catch()
instead (which normally is used for catching errors), and then after that, you have a.then()
where you use the data. Try putting the.catch()
at the end of that block instead.
Anyway, hope you can get the JSON bit sorted, and if you're interested, here's the JS file for my solution: https://github.com/elaineleung/frontendmentor/blob/main/timetrackingdashboard/index.js
Good luck, and let me know how else to help if you're still stuck.
Marked as helpful0@ekkas303Posted about 2 years ago@elaineleung thanks alot this was very helpful, about the article part and section i always thought they go together but yes i will try to improve on my html setup. It was my first time trying to connect json file to javascript but im sure ill get used to it soon thanks for the feedback.
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