如何将一个对象数组中的所有项目从Javascript动态显示为HTML？

Question

我是一个javascript新手，在一项作业中，我被指示创建2个 JS 文件，然后用html动态显示数据。一个JS文件 data.js 档有 array of objects (产品目录)，另一个JS文件有加载这些项目的功能，创建HTML元素并在HTML页面上显示项目(目录)。但是我的代码不能工作，不能以所需的格式显示产品，css也不能在函数中加载。我注意到确定某些语法，所以我在loadProducts()中注释了这段代码.我附上了截图，作为该函数如何准确工作的参考。请在这方面帮助我。

// 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>

谢谢你的帮助。