Results summary component

Solution retrospective
How can I use JSON file dynamically for better design.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @0xabdulkhaliq
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
SUGGESTION 💡:
- To import the JSON data into your JavaScript file, you can use the
import
statement or simply assign the JSON data to a variable. Here's how you can do it:
- Using the
import
statement (for modern JavaScript with ES6 modules). First, save your JSON data in a separate file, let's call itdata.json
:
[ { "category": "Reaction", "score": 80, "icon": "./assets/images/icon-reaction.svg" }, { "category": "Memory", "score": 92, "icon": "./assets/images/icon-memory.svg" }, { "category": "Verbal", "score": 61, "icon": "./assets/images/icon-verbal.svg" }, { "category": "Visual", "score": 72, "icon": "./assets/images/icon-visual.svg" } ]
- In your JavaScript file (let's say
result-summary.js
), you can use theimport
statement like this:
import jsonData from './data.json'; // Now you can use jsonData as an array of objects in your component // For example, you can log it to the console: console.log(jsonData);
- Make sure that both
result-summary.js
anddata.json
are in the same directory or provide the correct path todata.json
in the import statement.
- Assigning JSON data directly to a variable (for older JavaScript or non-module environments):
- If you are not using ES6 modules or if you want to directly assign the JSON data to a variable without using
import
, you can do it like this:
const jsonData = [ { "category": "Reaction", "score": 80, "icon": "./assets/images/icon-reaction.svg" }, { "category": "Memory", "score": 92, "icon": "./assets/images/icon-memory.svg" }, { "category": "Verbal", "score": 61, "icon": "./assets/images/icon-verbal.svg" }, { "category": "Visual", "score": 72, "icon": "./assets/images/icon-visual.svg" } ]; // Now you can use jsonData as an array of objects in your component // For example, you can log it to the console: console.log(jsonData);
- In both cases, you'll have the JSON data available in your JavaScript file, and you can use it in your "Result Summary" component as needed.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
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