Add object properties to table head and object properties values to table rows

Question

I have a table in html. I managed to show the table only when the mouse in over a specified object. For example when is over the dog object it will show the dog name. I wold like to also the cat age when the mouse is over the cat, in a few words I would like to populate the table with different object properties depending on the mouse position. This is my table :

   //this is how I would like my table to be
   <table class="featureInfo">
    <tr>
    //fill the th with the object properties
      <th>object propertie1</th>
      <th >object propertie2</th>
      <th >object propertie3</th>
      <th >object propertie4</th>
      <th >object propertie5</th>
      <th >object propertie6</th>
    </tr>

  <tr>
      <td>object propertie1 value</td>    
      <td>object propertie2 value</td>
      <td>object propertie3 value</td>
      <td>object propertie4 value</td>
  </tr>
  <tr class="odd">
      <td>object propertie1 value</td>    
      <td>object propertie2 value</td>
      <td>object propertie3 value</td>
      <td>object propertie4 value</td>
  </tr>
</table>

Now let's say I have these objects :

function Human() {
    this.id = 1; 
    this.firstName = "Human";
    this.lastName = "Last Name";
    this.eyecolor = "yellow";
    this.height = "1.94m";
}

function Dog() {
    this.id = 2;
    this.firstName = "Dog";
    this.lastName = "Last Name";
    this.hairy = "yes";
    this.legs = "4";
    this.weight = "20kg";
}

function Cat() {
    this.id = 3;
    this.firstName = "Cat";
    this.lastName = "Last Name";
    this.age = 5;
    this.friendly = "no";

var human = new Human();
var dog = new Dog();
var cat = new Cat(); 

And this is the javascript I managed to achieve :

//lets suppose obj is an xaml file with arrays full of objects
var tbody = document.getElementById('tbody');
for (var i = 0; i < Object.keys(obj).length; i++) {
    var tr = "<tr>";
    if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) obj[i].value += "0";

    tr += "<td>" + obj[i].key + "</td>" + "<td>$" + obj[i].value.toString() + "</td></tr>";
    tbody.innerHTML += tr;
}

The thing my properties are different for each object. Anyone who can guide me in the right direction? Thanks :)

Answer 1

To achieve expected result, use below option of displaying columns and displaying available values

twoloops required for building table

1. For headers
2. For building rows from Human, Dog, Cat Objects

function Human() {
    this.id = 1; 
    this.firstName = "Human";
    this.lastName = "Last Name";
    this.eyecolor = "yellow";
    this.height = "1.94m";
}

function Dog() {
    this.id = 2;
    this.firstName = "Dog";
    this.lastName = "Last Name";
    this.hairy = "yes";
    this.legs = "4";
    this.weight = "20kg";
}

function Cat() {
    this.id = 3;
    this.firstName = "Cat";
    this.lastName = "Last Name";
    this.age = 5;
    this.friendly = "no";
}

var human = new Human();
var dog = new Dog();
var cat = new Cat(); 

var tbody = document.getElementById('tbody');

var Obj = [];

Obj.push(human)
Obj.push(dog)
Obj.push(cat)

var txt ='<tr>';

var headers = []
//headers with all keys including duplicates  
for(y in Obj){
  headers = headers.concat(Object.keys(Obj[y]))
  }
//remove duplicates from headers
headers = headers.filter(function(item, pos) {
    return headers.indexOf(item) == pos;
})

console.log(headers);

for(z in headers){
  txt += `<th>`+headers[z]+`</th>`
  }


txt +="</tr>"
 for (x in Obj) {
            txt += `<tr>
   <td>`+ Obj[x].id + `</td>
   <td>`+ Obj[x].firstName + `</td>
   <td>`+ Obj[x].lastName + `</td>
   <td>`+ Obj[x].eyecolor + `</td>
   <td>`+ Obj[x].height + `</td>
   <td>`+ Obj[x].hairy + `</td>
   <td>`+ Obj[x].legs + `</td>
   <td>`+ Obj[x].weight + `</td>
   <td>`+ Obj[x].age + `</td>
   <td>`+ Obj[x].friendly + `</td>
</tr>`;
        }
        document.getElementById("featureInfo").innerHTML = txt;

table tr td, th{
  border:1px solid black
}

<table  id="featureInfo">
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>

  <tr>
      <td></td>    
      <td></td>
      <td></td>
      <td></td>    
      <td></td>
      <td></td>
  </tr>

</table>

Code sample - https://codepen.io/nagasai/pen/eMpJEE