Question 287538 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to fix my table to print out multiple lines of data?

I am currently having problems with displaying a table within my bootstrap modal. Below is where the table is being drawn:

function setHistory(info){
  
  document.getElementById("view_info_table").innerHTML = "";
  $(".view_info").removeClass("hide");
  if(info == undefined || info == null){
    return;
  }
  
  let string = "";
  if(info.length > 0){
    string = "<tr>" +
                "<th>Meeting Subject</th>" +
                "<th>Meeting ID</th>" +
              "<tr>";
    $("#view_info_table").removeClass("hide");
  } else {
    $('#view_info_table').addClass("hide");
  }
  for(let i = 0; i < info.length; i++){
    string = "<tr>" +
                "<td>" + info[i]['meetingsubject'] + "</td>" +
                "<td>" + info[i]['meetingid'] + "</td>" +
              "</tr>";
  }
  document.getElementById("view_info_table").innerHTML = string;
}

Currently the data will only show one line of data but should show at list four for the data I manual put in. What part of my code am I missing or what can be fixed that will allow multiple lines of data to be shown?

Tags:

2

Answers


  1. 0

    The reason you are only getting one line of code is because of this one section within it:

    for(let i = 0; i < info.length; i++){
    string += "<tr>" +
                "<td>" + info[i]['meetingsubject'] + "</td>" +
                "<td>" + info[i]['meetingid'] + "</td>" +
              "</tr>";
  }

    As seen above you should add a ‘+’ before your equal sign. This will allow the for statement to be ran multiple times instead of a single time.

    Login or Signup to reply.
  2. 0

    @BradleyO. has provided you the solution to your immediate problem, but it’s worth noting that there’s a few additional things you can do to improve the quality of your code.

    Firstly, avoid putting HTML in your JS as much as possible. Use <template> elements instead in the HTML to contain it, then reference and amend this in your JS.

    Also, DOM operations are (relatively) slow, so use them sparingly. It’s generally more performant to build a HTML string and append it to the DOM in a single operation. As you’re working with an array in this example you can use map() to build the array from a template.

    With those amendments made your code would end up looking something like this:

    const table = document.querySelector('#view_info_table');
const viewInfo = document.querySelector('.view_info');
const tableHeadingTemplate = document.querySelector('#table-heading-template').innerHTML;
const tableRowTemplate = document.querySelector('#table-row-template').innerHTML;

function setHistory(info) {
  if (!info || !info.length) {
    table.classList.add('hide');
    return;
  }
  
  let tableContent = info.map(obj => tableRowTemplate
    .replaceAll('{{subject}}', obj.meetingsubject)
    .replaceAll('{{id}}', obj.meetingid)).join('');
    
  table.innerHTML = tableHeadingTemplate + tableContent;
  table.classList.remove('hide');
}

const exampleData = [{ meetingid: '1234', meetingsubject: 'subject #1' }, { meetingid: '9876', meetingsubject: 'subject #2' }]
setHistory(exampleData);
    .hide {
  display: none;
}
    <table id="view_info_table"></table>
<div class="view_info"></div>

<template id="table-heading-template">
  <tr>
    <th>Meeting Subject</th>
    <th>Meeting ID</th>
   <tr>
</template>

<template id="table-row-template">
  <tr>
    <td>{{subject}}</td>
    <td>{{id}}</td>
  </tr>
</template>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search