Here is an example code snippet for adding a single item from a pre-written array to a table. In this case, we have a simple name element so only one "< td>${people[i]}< /td>" tag is needed to display the names.
let people: string [] = ["Jack", "Michael"]
for (let i: number = 0; i < people.length; i++) {
document.getElementById ("buddies").innerHTML +=
`<tr>
<td>${people[i]}
<tr>`;
}
If you want to achieve the same result using a class instead of directly writing content into the array, you can follow this approach:
class Person{
public FirstName : string
public LastName : string
constructor (Firstname: string, Lastname: string) {
this.FirstName = Firstname;
this.LastName = Lastname;}
let people: Person [] = [
new Person ("Peter", "Parker")]
for (let i: number = 0; i < people.length; i++) {
document.getElementById ("table").innerHTML +=
`<tr>
<td>${people[i].FirstName} //this is where the first name should be//
<td>${people[i].LastName} //this is where the last name should be //
<tr>`;
}
If you are encountering issues such as displaying [object Object] in your table row, try assigning the specific properties of each object (in this case, FirstName and LastName) to ensure correct rendering in the table.
Hope this helps steer you in the right direction!