How to dynamically display all items from an array of objects from Javascript to HTML?
Question
I am new to Javascript and in an assignment I am directed to create 2 JS files and then display data dynamically in HTML. One JS file data.js file have an array of objects (product catalog) and another JS file has function which loads those items, create HTML elements and display items (catalog) on HTML page. But my code is not working and not displaying the products in required format? css also not loading in function. I am note sure about certain syntax so I have commented that code in loadProducts(). I am attaching screenshot as a reference of how function is expected to work exactly. Please help me in this regard.
// data.js var catalog = [ { code: 100, name: "Learn JS", desc: "To make your web paged dynamic", price: 150, image: "/images/100Tshirt.jpg" }, { code:101, name: "T Shirt", desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.", price: 0, image: "/images/101Tshirt.jpg" }, { code:102, name: "T Shirt", desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.", price: 0, image: "/images/102Tshirt.jpg" } // { // name: "Meowsalot", // species: "Cat", // favFoods: ["tuna", "catnip", "celery"], // birthYear: 2012, // photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg" // ]; // codeboutique.js function chargerArticles() { var articles = document.getElementById("content"); for (var i =0; i <= catalog.length; i++) { var article = document.createElement("div"); article.setAttribute("class", "addClass"); var articleName = document.createElement("h2"); articleName.setAttribute("class", "heading"); articleName.innerText = catalog[i].name; article.appendChild(articleName); articles.appendChild(article); //also hoow to acess style.css to style h2 (dynamic element) // var nameName= catalog.name.innerText; // document.body.appendChild(article); var articleImg = document.createElement("img"); articleImg.setAttribute("class", "imgclass class2 class3"); articleImg.setAttribute("src", catalog[i].image); // articleImg.setAttribute("src", "/images/100Tshirt.jpg"); // articleImg.setAttribute("src", "100Tshirt.jpg"); // articleImg.innerText = catalog[i].image; article.appendChild(articleImg); } }
.addClass { font-size: 44px; color:grey; background-color: blue; border-style: 2px solid yellow; }.heading { color: green; }.border { border: 1px solid grey; }.pad { padding: 15px; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title</title> <script src="js/data.js"></script> <script src="js/codeboutique.js"></script> <link rel="stylesheet" type="text/css" href="css/mystyle.css"> </head> <body onload="chargerArticles()"> <section id="content"> </section> </body> </html>
Thank you.
1 answers
solution1
1 2020-06-09 12:32:45
Look back at the instructions in your screenshot. I can clearly see instructions there that you've skipped that would solve your problem.
In particular:
Insert articleName as a child of the article element
appendChild() (from your comment) is the right function, but document.body is the wrong object to call it from. Think it through.
I assume that farther down is an instruction to insert the article as a child of the catalog table ("articles").
It may be a little confusing that you aren't using the recommended variable names from the assignment instructions. Of course, you can easily get the code to work with different variable names if you know what you're doing, but since you've stated your a beginner, I'd recommend following the guidance more closely for now.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.