How to display the content of an array using class attributes in TS?-CodePudding

This is the example code to add a single item out of a pre-written array to a table. There is only a single name element so I only need one "< td>${people[i]}< /td>" tag for the names to be displayed.

    let people: string [] = ["Jack", "Michael"]

    for (let i: number = 0; i < people.length; i  ) {
    document.getElementById ("buddies").innerHTML  =
    `<tr>
    <td>${people[i]}
    <tr>`;
    }

So how would I have to go about to get the same result if I want to use a class instead of simply writing the content into the array?

    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]}             //this is where the first name should be//
    <td>${people[i]}             //this is where the last name should be //
    <tr>`;
    }

I know that the current content of my < td> tags is nonsensical but I cannot wrap my head around how to assign the last and first name to the corresponding tag while still using my function, which is also inside of a renderlist. When opened in my browser I get [object Object] in my table row instead of "Peter Parker".

A nudge in the right direction would be greatly appreciated.

CodePudding user response：

Well, in this case people is an array of instances of the class Person, objects of Person, and this class has the properties FirstName and LastName.

So now, when you iterate in your loop over people, to access its attributes you should do people[i].FirstName and people[i].LastName.

 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>`;
 }

So your code should look something like this:

<table id="table"></table>

<script>
  // Made it with JS, but the class syntax is mostly the same in TS, since TS is a superscript of JS
  class Person{
      constructor (Firstname, Lastname) {
         this.FirstName = Firstname;
         this.LastName = Lastname;
         }
   }

  let people = [new Person ("Peter", "Parker"), new Person ("Jhonny", "Johnson")]

  for (let i = 0; i < people.length; i  ) {
    document.getElementById("table").innerHTML  =
    `<tr>
    <td>${people[i].FirstName}
    <td>${people[i].LastName}
    <tr>`;
  }

</script>

Also, there are a few mistakes with your code, such as the class doesn't have an ending bracket, and also, to define a class it's just

class Person{
 ...
}

and not

class = Person{
  ...
}

More examples can be found in the docs.