Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results Summary Component using JQuery

@harnettd

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Reading in a local JSON file was surprisingly difficult. In the end, I edited the data.json file so that it defined data to be a list of objects. Then, I loaded the file in index.html using a script tag. But to do this, I needed to be able to edit data.json which won't always be the case. So, what's the simplest way to read a local JSON file?

Community feedback

@agomez99

Posted

You can use the fetch API

fetch('./data.json')
.then(response => response.json())
.then(data => {
// Access the JSON data here
console.log(data);

// You can iterate over the array and access each object's properties
data.forEach(item => {
console.log('Category:', item.category);
console.log('Score:', item.score);
console.log('Icon:', item.icon);
});
})
.catch(error => {
console.log('Error:', error);
});

Marked as helpful

0

@harnettd

Posted

@agomez99, Thanks for the feedback. I'll give it a try.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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