Question

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

我创建了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>  
        `);
}

我有餐厅和活动班。然后，我创建了一个数组并推送了对象：

let placesArr = [];

placesArr.push(
    new Place(
        "La Sagrada Familia",
        "Barcelona",
        "08013",
        "Carrer de Mallorca 401.",
        "img/sagradafamilia.jpg"
        )
);
new restaurant(
    "Raco del Nuria",
    "Barcelona",
    "08002",
    "La Rambla 133.",
    "img/racodelnuria.jpg",
    "+34-933-01-05-77",
    "Mediterranean",
    "racodelnuria.com"
);
new events(
    "FC Barcelona vs. Athletic Club de Bilbao",
    "Barcelona",
    "08028",
    "C. d'Aristides Maillol 12.",
    "img/foci.jpg",
    "06.23.2020",
    "22:00",
    "from 29 euro"
);

我尝试了console.table，上面的所有代码都能正常工作，因为我在控制台中拥有所有数据。

最后，我只需要遍历数组并显示在HTML中，该HTML只有一个空的div，其中包含 class =“ row” 和 id =“ cardContainer” < / strong>，但我不知道如何。有人可以帮我吗？

Answer 1

由于您已经具有显示功能来附加模板文字html，请尝试使用以下代码

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

Answer 2

您可以使用以下示例：

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>';

然后您就可以使用 $("cardContainer").append(table)

遍历对象数组并以HTML显示

2 个答案: