Remove repeated DOM inserts
This commit is contained in:
parent
833517b2dd
commit
93de04e9b6
13
js/pis.js
13
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.
|
// 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
2
pis.html
@ -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>
|
||||||
|
Reference in New Issue
Block a user