Adding Array values to a Bootstrap table

Question

I have a name[10] array and a score[10] array inside a script in a html file that uses both Bootstrap 4 and Firebase's FireStore.

Is there a way to pass the array variables into the table, as currently the table only seems to accept string values, rather than variables.

<script>
        var nameArray =  Array.from(querySnapshot.docs, x => x.data().name);

        var scoreArray =  Array.from(querySnapshot.docs, x => x.data().score);

//Outputs values into

format

document.getElementById("0").innerHTML = "Name "+ " | " + "Score";
document.getElementById("1").innerHTML = nameArray[0] + " | " + scoreArray[0];  
document.getElementById("2").innerHTML = nameArray[1] + " | " + scoreArray[1];
document.getElementById("3").innerHTML = nameArray[2] + " | " + scoreArray[2];  
document.getElementById("4").innerHTML = nameArray[3] + " | " + scoreArray[3];      
document.getElementById("5").innerHTML = nameArray[4] + " | " + scoreArray[4];  
document.getElementById("6").innerHTML = nameArray[5] + " | " + scoreArray[5];      
document.getElementById("7").innerHTML = nameArray[6] + " | " + scoreArray[6];  
document.getElementById("8").innerHTML = nameArray[7] + " | " + scoreArray[7];      
document.getElementById("9").innerHTML = nameArray[8] + " | " + scoreArray[8];
document.getElementById("10").innerHTML = nameArray[9] + " | " + scoreArray[9]; 



</script>

<div class="container-fluid">        
  <table class="table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Score</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>26</td>
      </tr>
      <tr>
        <td>Dave</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>

<p id="0"></p>
<p id="1"></p>
<p id="2"></p>
<p id="3"></p>
<p id="4"></p>
<p id="5"></p>
<p id="6"></p>
<p id="7"></p>
<p id="8"></p>
<p id="9"></p>
<p id="10"></p>

Rohith Murali · Accepted Answer · 2018-05-04 18:07:03Z

1

You can add an id to the table, and use getElementById() to get the table element and then inside the <script> itself you may use variables to fill the values into the <td>variable</td> and insert this tags into the element using innerHtml

    <script>
      var table = document.getElementById('tableContents');
      var tableContents = '<tr><td>'+nameArray[0]+'</td><td>'+scoreArray[0]+'</td></tr>';
      table.innerHTML = tableContents;
    </script>


  <div class="container-fluid">        
      <table class="table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Score</th>
          </tr>
        </thead>
        <tbody id='tableContents'>
        </tbody>
      </table>
    </div>

edited May 4, 2018 at 18:07

answered May 3, 2018 at 18:29

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Luke Alexander Thompson Over a year ago

I added an id to the table, and I managed to get the variables of the array printing out to a <p> using document.getElementById("1").innerHTML = nameArray[0] + " | " + scoreArray[0]; But when I tried using that for the table values it didn't seem to work

Rohith Murali Over a year ago

The innerHtml string value should be exactly same to the contents of the example you posted above except that you should use your variable names instead of the values in the <td>

Luke Alexander Thompson Over a year ago

So should I copy the structure of the BootStrap table into the <script>? I will update the code as to what I have now as I don't understand what you mean, could you add an example?

Luke Alexander Thompson Over a year ago

Thanks! That worked, I just had to change the innerHtml suffix to the correct Syntax (innerHTML).

Collectives™ on Stack Overflow

Adding Array values to a Bootstrap table

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related