title: Adding Array values to a Bootstrap table
body: <p>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. </p>
  
  <p>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.</p>
  
  <pre><code>&lt;script&gt;
          var nameArray =  Array.from(querySnapshot.docs, x =&gt; x.data().name);
  
          var scoreArray =  Array.from(querySnapshot.docs, x =&gt; x.data().score);
  </code></pre>
  
  <p>//Outputs values into <p> format            </p>
  
  <pre><code>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]; 
  
  
  
  &lt;/script&gt;
  
  &lt;div class="container-fluid"&gt;        
    &lt;table class="table-striped"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Score&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;John&lt;/td&gt;
          &lt;td&gt;50&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Mary&lt;/td&gt;
          &lt;td&gt;26&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Dave&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;p id="0"&gt;&lt;/p&gt;
  &lt;p id="1"&gt;&lt;/p&gt;
  &lt;p id="2"&gt;&lt;/p&gt;
  &lt;p id="3"&gt;&lt;/p&gt;
  &lt;p id="4"&gt;&lt;/p&gt;
  &lt;p id="5"&gt;&lt;/p&gt;
  &lt;p id="6"&gt;&lt;/p&gt;
  &lt;p id="7"&gt;&lt;/p&gt;
  &lt;p id="8"&gt;&lt;/p&gt;
  &lt;p id="9"&gt;&lt;/p&gt;
  &lt;p id="10"&gt;&lt;/p&gt;
  </code></pre>