Trying to display a table in HTML from an array with JS

Question

I have an array with many five users that I'm trying to display on a table in my HTML. I THINK I did a good job with my JS code (or at least I think so...lol... I'm new with coding), I just don't understand how to display this whole table content of arrays in my HTML. I tried the .innerHTML thing but it doesn't work.

Hope someone can figure it out. Thanks in advance. :S :)

let myArr = []; 

function User (name, lastname, city, email) {
    this.name = name;
    this.lastname = lastname;
    this.city = city;
    this.email = email;
}

let userOne = new User('Leonardo', 'Parigini', 'Santorini', 'leoparigini@gmail.com');
let userTwo = new User('Edoardo', 'Merlini', 'Monaco', 'edomerlini@gmail.com');
let userThree = new User('Nicole', 'De Lellis', 'Milano', 'nickydelellis@gmail.com');
let userFour = new User('Jasmine', 'Scherzinger', 'Los Angeles', 'jazzylax@gmail.com');
let userFive = new User('Emily', 'Knowles', 'San Francisco', 'emilyknow@gmail.com');


myArr.push(userOne, userTwo, userThree, userFour, userFive);
console.log(myArr); 

let myNewArr = [...myArr];
console.log(myNewArr); 

var table = document.querySelector('#myTable')
table.innerHTML = '<tr><td>' + myNewArr + '</td></tr>'

<body class="bg-info">

    <div class="container">
        <h1 class="display-3">USER LIST</h1>
        <table class="table table-dark table-striped" id="myTable">
            <thead>
              <tr>
                <th scope="col" id="nome">Nome</th>
                <th scope="col" id="cognome">Cognome</th>
                <th scope="col" id="citta">Città</th>
                <th scope="col" id="email">Email</th>
              </tr>
            </thead>
            <tbody>

                <!--   <tr id="myListHTML">   </tr>
                            
                <th scope="row"></th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
           
              <tr>
                <th sco pe="row">3</th>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>

            </tbody> -->
          </table>
   

    </div>

Your array data is correct. Please add whatever you have tried to add it, so we can build up on that and help. — Tushar Shahi, Jul 06 '21 at 06:21
you need to iterate over you array in JavaScript and create table rows and append in your table (myTable). — Amit Verma, Jul 06 '21 at 06:22
document.createElement() could be used, but is usually very verbose; more succinct is the use of — flowtron, Jul 06 '21 at 06:23

score 3 · Accepted Answer · answered Jul 06 '21 at 06:23

Here is a useful method

I use map and template literals

function User(name, lastname, city, email) {
  this.name = name;
  this.lastname = lastname;
  this.city = city;
  this.email = email;
}

let myArr = [
  new User('Leonardo', 'Parigini', 'Santorini', 'leoparigini@gmail.com'),
  new User('Edoardo', 'Merlini', 'Monaco', 'edomerlini@gmail.com'),
  new User('Nicole', 'De Lellis', 'Milano', 'nickydelellis@gmail.com'),
  new User('Jasmine', 'Scherzinger', 'Los Angeles', 'jazzylax@gmail.com'),
  new User('Emily', 'Knowles', 'San Francisco', 'emilyknow@gmail.com')
]
//console.log(myArr);

document.querySelector("#myTable tbody").innerHTML = myArr.map(user => `<tr><td>${user.name}</td><td>${user.lastname}</td><td>${user.city}</td><td>${user.email}</td></tr>`).join('')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<div class="container">
  <h1 class="display-3">USER LIST</h1>
  <table class="table table-dark table-striped" id="myTable">
    <thead>
      <tr>
        <th scope="col">Nome</th>
        <th scope="col">Cognome</th>
        <th scope="col">Città</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

Trying to display a table in HTML from an array with JS

1 Answers1