L oop через разные классы + применить функцию

Question

Итак, я хочу немного выучить js / ts и попробовать следующее: Заполнение веб-сайта информацией о классах.

На данный момент я сделал все классы, конструкторы и функции. также создал несколько фиктивных переменных для вставки в классы и их работы в консоли - он возвращает объект.

Я думаю, что я действительно близок к решению. Теперь чего не хватает):

-) Как автоматически применить все 3 различных переменных класса к моему веб-сайту в al oop (l oop не гаснет в первую очередь, в консоли нет ошибки -) как применить функция сортировки, которую я уже написал для этого l oop

С уважением

//Empty Arrays
let locationarr = [];
let restaurantnarr = [];
let eventsarr = [];
// Classes
class locations {
    constructor(name, city, zip, img, dates) {
        this.name = name;
        this.city = city;
        this.zip = zip;
        this.img = img;
        this.dates = dates;
        locationarr.push(this);
    }
    ;
    display() {
        let content = `<div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/${this.img}" alt="${this.name}">
      <div class="card-body">
        <h5 class="card-title">${this.name}</h5>
        <p class="card-text">City: ${this.city} Zip-Code ${this.zip}
        <br>
        <p>Created: ${this.dates.toLocaleString('de-AT')}
        </p>
            </div>
    </div>
      `;
        return content;
    }
}
class restaurants extends locations {
    constructor(name, city, zip, img, dates, phone, type, web) {
        super(name, city, zip, img, dates);
        this.phone = phone;
        this.type = type;
        this.web = web;
        restaurantnarr.push(this);
    }
    ;
    display() {
        let content = `<div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/${this.img}" alt="${this.name}">
      <div class="card-body">
        <h5 class="card-title">${this.name} ${this.type}</h5>
        <p class="card-text">City: ${this.city} Zip-Code ${this.zip}
        <br>
        <p>
        <label>Phone, Web</label>
        <br>
        ${this.phone} 
        <br>
        ${this.web}
        <p>Created: ${this.dates.toLocaleString('de-AT')}
         </p>
            </div>
    </div>
      `;
        return content;
    }
}
class events extends locations {
    constructor(name, city, zip, img, dates, eweb, edate, etime, eprice) {
        super(name, city, zip, img, dates);
        this.eweb = eweb;
        this.edate = edate;
        this.etime = etime;
        this.eprice = eprice;
        eventsarr.push(this);
    }
    display() {
        let content = `<div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/${this.img}" alt="${this.name}">
      <div class="card-body">
        <h5 class="card-title">${this.name}</h5>
        <p class="card-text">City: ${this.city} Zip-Code ${this.zip}
        <br>
        <label> Event Infos </label>
        <ul>
        <li>${this.edate}</li>
        <li>${this.etime}</li>
        <li>${this.eprice}</li>
        <li>${this.eweb}</li>
        </ul>
        <p>Created: ${this.dates.toLocaleString('de-AT')}
        </p>
            </div>
    </div>
      `;
        return content;
    }
}
//2 dummys for each class to see if loop & sort working

let tower = new locations("Tower", "dubay", 4993, "1.jpg", new Date(2015, 1, 1, 5, 40));
let palm = new locations("Palme", "Dubai", 333, "1.jpg", new Date(2011, 1, 1, 5, 40));
let mcdonald = new restaurants("Mcdonald", "melbourn", 4544, "2.jpg", new Date(2020, 2, 2, 4, 30), "+66 4895643312", "fastfood", "www.getfat.com");
let burgerking = new restaurants("Burgerkin", "Switzerlan", 4334, "2.jpg", new Date(2011, 2, 2, 4, 30), "+66 443543512", "fastfood", "www.getfatter.com");
let eatburger = new events("Eating Burger", "burgertown", 4234, "3.jpg", new Date(2019, 1, 1, 3, 25), "www.event.com", "14. June. 2100", "3 o clock", 56);
let sky = new events("Sky diving", "skytown", 4666, "3.jpg", new Date(2011, 1, 1, 3, 25), "www.eve222nt.com", "14. June. 2000", "5 o clock", 560);


// Insert all informations to main HTML
$(document).ready(function () {
    function populate() {
        for (let i = 0; i < locationarr.length; i++) { // how to automatically adress all 3 classes / arrays in one loop?
            let loc = locationarr[i].locations.display(); // how to call the specific class function ?
            $("body").append(loc);
        }
    }
});
//SORTFUNCTION Ascneding and Descending from the Value of the Date. its for different html sites called ascending, descending^^
function sortA(a, b) {
    return a.dates.valueOf() - b.dates.valueOf();
}
function sortD(a, b) {
    return b.dates.valueOf() - a.dates.valueOf();
}
//apply function to loop for ascending webpage / descending webpage
//ascending:
$(document).ready(function () {
    function populate() {
        for (let i = 0; i < locationarr.length; i++) {
            let loc = locationarr[i].locations.display();
            $("body").append(loc.sortA()); // Is this how i would apply this function to sort it properly
        }
    }
});