Multiple column in JavaScript

Question

I am new to JavaScript. I wrote forEach and the head table repeats every time I add something in database. I need col to stay and when I add something new to database its add in rows.

Here is a screenshot to illustrate what I mean:

Code:

import {http} from "./http.js";

document.addEventListener("DOMContentLoaded", getProducts);

function getProducts() {
    http
   
        .get('http://localhost:3000/products')
        .then((data) =>{
            let output = "";
            
            data.forEach((product) => {
                
                output += `
                
                <table class="table">
                <thead class="thead-dark">
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Clasa</th>
                    <th scope="col">Numar Elevi</th>
                    <th scope="col">Profesor</th>
                    <th scope="col">Media Notelor</th>
                  </tr>
                </thead>
                
                <tbody>
                   <tr>
                    <th scope="row">${product.id}</th>
                     <td>${product.numar}</td>
                    <td>${product.profesor}</td>
                     <td>${product.elevi}</td>
                     <td>${product.media}</td>
                   </tr>
                   </tbody>                
 </table>
`;
              
         
            })
            document.getElementById('table').innerHTML = output;
        });
}

Ah, I think I can see the problem - you are adding a full new table for each row. Could you find the tbody and in the loop just append new rows (tr) to it? — halfer, Oct 16 '21 at 12:56
Looks like this would be helpful (perhaps even a duplicate): https://stackoverflow.com/questions/10309650/add-elements-to-the-dom-given-plain-text-html-using-only-pure-javascript-no-jqu — halfer, Oct 16 '21 at 12:57

Old Geezer · Answer 1 · 2021-10-17T01:49:56.470

// As the Ajax call is not the issue here, simulate some sample data
const data = [ 
  { id:1, numar: "a IV-a A", profesor: 23, elevi: "Matel Marian", media: "8.32"}, 
  { id:2, numar: "a VI-a C", profesor: 26, elevi: "Cornel Ababei", media: "7.96"}, 
  { id:3, numar: "ss", profesor: "sss", elevi: "sss", media: "sss"}, 
];

// The <table>, <thead>, and <tbody> tags are needed just once
let output = `<table class="table">
               <thead class="thead-dark">
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col">Clasa</th>
                   <th scope="col">Numar Elevi</th>
                   <th scope="col">Profesor</th>
                   <th scope="col">Media Notelor</th>
                 </tr>
               </thead>
               <tbody id="tbody">`;

// Then for each item, append a <tr>...</tr> element
data.forEach((product) => {
                output += `
                   <tr>
                    <th scope="row">${product.id}</th>
                     <td>${product.numar}</td>
                    <td>${product.profesor}</td>
                     <td>${product.elevi}</td>
                     <td>${product.media}</td>
                   </tr>`;
            });

// Finally, close off with </table>
output += "</tbody></table>";

document.getElementById("table").innerHTML = output;

// Say later you have another Ajax call and got another item. 
const add = () => {
  // simulated data:
  const newItem = I = { id:4, numar: "b IX-c D", profesor: 88, elevi: "Richard Feyman", media: "9.99"};
  let row = document.createElement("tr");
  row.innerHTML = `<td>${I.id}</td><td>${I.numar}</td><td>${I.profesor}</td><td>${I.elevi}</td><td>${I.media}</td>`;
  const tbody = document.getElementById("tbody");
  tbody.appendChild(row);
}

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

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

<p>
 <button onclick="add()">Add another row</button>
</p>

Can you add some commentary to this to explain what you fixed, and what the problem was? I admit the question author didn't seem to have made much of an effort, but perhaps for the benefit of future readers, some explanatory material might be useful. — halfer, Oct 16 '21 at 16:45

Multiple column in JavaScript

1 Answers1