OwlBoard/web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Remove repeated DOM inserts

Browse Source
This commit is contained in:
Fred Boniface 2023-04-22 22:44:32 +01:00
parent 833517b2dd
commit 93de04e9b6
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
js/pis.js
View File

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

2
pis.html
View File

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