Design comparison
Solution retrospective
I can't use the JSON file. Please help me to know to access data and use data of from JSON file in Javascript.
Community feedback
- @wagnnermoraisPosted about 1 year ago
hey, sandeep, how u doing?
to use the json file, first of all, you need to create a javascript file, then, you must link it in the bottom of your html file, right above your closing body tag </body> (best practices), using the script tag, it would be something like script type="module" src="./script.js"
then, in you js file, you must link the data file, a simple import should work, now, back to html, in your "container-col" div, add an id attribute to it, id="container" for instance.
in the js again, "get" the container element using any built in function that js provides, a simple get element by id will work.
after that, its time to iterate through the data file using a callback fn. using a forEach, you will use the createElement fn to use the data from data json.
then, after creating all elements, you will just append it to the parent element, and thats pretty much it!
heres the code:
import data from "./data.json" assert { type: "json" };
const container = document.getElementById("container");
data.forEach((item) => {
const div = document.createElement("div");
div.classList.add("summary-result-box");
const logo = document.createElement("img");
logo.setAttribute("src", item.icon);
const category = document.createElement("p");
category.innerText = item.category;
const score = document.createElement("p");
score.innerText = item.score;
div.appendChild(logo);
div.appendChild(category);
div.appendChild(score);
container.appendChild(div); });
ive made a better comment before, explaining line by line, but front-end mentor simply deleted it... but i hope you can understand that way. :)
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