Javascript 在对象数组中循环并在HTML中显示它们

我是一名编码初学者，我想解决以下任务：

我创建了3个不同的类。主要课程是地方课程，其次是餐厅课程和活动课程。餐厅类和事件类都继承了地点类的基本属性，并具有仅针对它们自己的额外属性。 每个类都有一个显示其特定内容的display（）函数。我为每个类创建了2个对象。创建的所有对象都放置在一个数组中，该数组应循环显示页面上的每个对象

使用显示功能初始化：

class Place {
Name = "";
City = "";
ZIP = "";
Address = "";
Image = "";

constructor(Name, City, ZIP, Address, Image){
    this.Name = Name;
    this.City = City;
    this.ZIP = ZIP;
    this.Address = Address;
    this.Image = Image;
}

display(){
    $("cardContainer").append(`
        <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card" style="width: 18rem;">
                    <img src="${this.Image}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${this.Name}</h5>
                        <p class="card-text">${this.City},<br>${this.ZIP} ${this.Address}</p>
                    </div>
                </div>
            </div>  
        `);
}

我尝试了console.table，上面的所有代码都可以工作，因为我在控制台中有所有的数据

---

最后，我只需要在数组中循环并在HTML中显示，它只有一个空div，其中包含class=“row”和id=“cardContainer”，但我不知道如何显示。有人能帮我吗？

你可以利用以下例子：

var table = '<md-table-container>' +
            '<table class="md-table" border="1" style="text-align:center">' +
            '<thead class="md-head">' +
             '<tr md-row>';
              for (i = 0;i < data.length; i++) { //here you can use your array
                 table += '<th class="md-column">' + data[i] + '</th>';
              }
              table += '</tr></thead>';
              table += '</table></md-table-container>';

var表=“”+
'' +
'' +
'';
对于（i=0；i

然后你可以用

---

$（“cardContainer”）.append（表）

既然您已经有了附加模板文本html的显示功能，请尝试使用以下代码

placesArr.forEach(place => place.display())

---

如果要附加到的元素的

id

称为“cardContainer”，则选择器应以

#

作为前缀。例如，

$（“#cardContainer”）.append（…）

您已经硬编码了

display（）

函数，将

Place

的HTML附加到

cardContainer

元素，如

如果您想让它转到

，您应该使用

$（“#cardContainer”）.append（…）。一旦解决了这个问题，只需对数组中的每个元素调用
.display（）
；对于（设i=0；iplacesArr.forEach(place => place.display())