Remove repeated DOM inserts

js/pis.js

@@ -27,21 +27,24 @@ async function insertData(json) {
     // PIS codes.  Display the code and the stops with a method of scrolling between them.
     // Maybe as a table or a carousel?
     const div = document.getElementById('result-box')
-    const tableHtml = `<table id="result-table">
+    let tableData = `<table id="result-table">
         <tr>
         <th class="code">Code</th>
         <th class="stops">Stations</th>
-        </tr>
-        </table>`
+        </tr>`
     div.insertAdjacentHTML("beforeend", tableHtml)
     const table = document.getElementById('result-table')
     const data = JSON.parse(json)
+    let results = 0
     for(var i = 0; i < data.length; i++) {  // Break into separate function.  Need to
                                             // iterate over stops.
-        let row = `<tr><td class="code">${data[i][code]}</td>
+        tableData += `<tr><td class="code">${data[i][code]}</td>
             <td class="stops">${data[i][stops]}</td></tr>`
-        table.insertAdjacentHTML("beforeend", row)
+        results++
     }
+    tableData += "</table>"
+    table.insertAdjacentHTML("beforeend", tableData)
+    document.getElementById('result-count').textContent = results
 }
 
 async function noData() {

pis.html

@@ -55,7 +55,7 @@
     </div>
 
     <div id="result-box">
-        <h3>Results</h3>
+        <h3>Results: <span id="result-count">0</span></h3>
         <!-- display: none; by default, some kind of box which shows each code
              and destination individually with a previous and next arrow. -->
     </div>