Create a dyinamic table of object with JS and show datas

Hi coders,
In these days i’m doing Object and OOP concept in Javascript.
I create this dynamic table but show me typeof of my object and not object’s properties .
Then i need to create another class “Gilda” ( I still have to think what to put inside) and add in my table ( i think to add other cell ,but I don’t know if inside array you can add an Object inside other Object).

This is my code:
https://codepen.io/camilco/pen/WNQerZR
It’s Italian ,but my Object called Heroes and the properties are name, ability, grade and arms.

I hope I have been exhaustive and clear and thanks,
CamCode

You must specify the properties of the object you want to display. You could iterate through the properties with a for in and display them however you want. Currently, you have assigned objects to the innerHTML of table cells. These get coerced into the string you see [object Object].

You could create a method in your Eroe class named mostraEroe that returns some HTML (as a string) and call the method like:

cell.innerHTML = arrayDiEroi[i].mostraEroe();

The returned HTML could be another table or just a simple list.

1 Like

This is my code that i have create in js, when I click on button doesn’t display in the table.

How can I get a new object displayed and put it inside a table?

(sorry but it’s in Italian)

My file js: here i create a listener that if an user click on button display input’s values and create a new object( but i don’t know if it’s correct my logic)

const aggiungiBtn = document.getElementById("btn-aggiungi");

aggiungiBtn.addEventListener("click" ,function(){

   /* let messaggio = document.createElement("p");
    messaggio.textContent = "Già aggiunto!";*/

    let nuovoDet = {
        nome: document.getElementById('nome').value,
        eta: document.getElementById('eta').value,
        genere: document.getElementById('genere').value,
        razza: document.getElementById('razza').value
    };

    let aggiungiDetenuti = arrayDetenuti.push(nuovoDet);
    document.getElementById("table-data").innerHTML = aggiungiDetenuti;
})

my file HTML

<div class="form">    
 \*<!--Aggiungere l'evento -->\*    
 <form id="form-gestione" class="form-gestione" >    
 <input type="text" name="nome" id="nome" value="" placeholder="nome">    
 <input type="text" name="eta" id="eta" value="" placeholder="età">    
 <input type="text" name="genere" id="genere" value="" placeholder="genere">    
 <input type="text" name="razza" id="razza" value="" placeholder="razza">     
 <button id="btn-aggiungi" >Aggiungi</button>    
 </form>    
 </div>    
 <div id="table-block" class="table-all">    
 <table>    
 <thead>    
 <tr>    
 <th>Nome</th>    
 <th>Età</th>    
 <th>Genere</th>    
 <th>Razza</th>    
 </tr>    
 </thead>    
 <tbody id="table-data"></tbody>    
 </table>    
 </div>