Цикл по массиву объектов и отображение их в HTML - PullRequest
Новая
       12

Цикл по массиву объектов и отображение их в HTML

0 голосов
/ 19 июня 2020

Я новичок в кодировании и хочу решить следующую задачу:

Я создал 3 разных класса. Основным классом является класс Place , за которым следует класс ресторана и класс событий . Оба класса ресторан и класс событий наследуют основные свойства c от класса Place и имеют дополнительные свойства, указанные c только для себя. Каждый класс имеет функцию display () , отображающую их специфическое c содержимое. Я создал по 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, который имеет только пустой div с class = "row" и id = "cardContainer" , но я не знаю как. Кто-нибудь может мне помочь?

Ответы [ 2 ]

1 голос
/ 19 июня 2020

Поскольку у вас уже есть функция отображения для добавления литерала шаблона html, попробуйте использовать следующий код 

placesArr.forEach(place => place.display())
0 голосов
/ 19 июня 2020

Вы можете использовать следующий пример: 

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)

...