Struggling to integrate open data information from a website onto an AJAX form using JS and HTML. The source I'm trying to use is this link.
Here's my HTML form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Assignment</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script src="ajax.js"></script>
</head>
<body>
<div class="container">
<h1 class="title">Winnipeg's Plow Schedule</h1>
<h2 class="subtitle">Search the history of the City of Winnipeg's Snow Plow schedule'.</h2>
<form class="box" id="searchform">
<div class="field">
<label class="label">Search for Plow Zone by Zone Letter</label>
</div>
<div class="field has-addons">
<div class="control is-expanded">
<input class="input is-full-width" name="common-name" id="common-name">
</div>
<div class="control">
<button class="button is-primary" type="submit" id="submit">Search</button>
</div>
</div>
</form><br>
<h2 class="explanation subtitle"></h2> <br>
<div id = "div1">
<table class="table is-fullwidth is-hoverable trees">
<thead></thead>
<tbody></tbody>
</table>
</div>
<br>
<p> Plow data provided by the <a href="https://data.winnipeg.ca/">City of Winnipeg Open Data catalogue</a>. </p>
</div>
</div>
</body>
</html>
Javascript code used:
function fetch(){
let commonName = document.getElementById("common-name").value.toLowerCase();
const apiUrl = 'https://data.winnipeg.ca/resource/tix9-r5tc.json' +
`$where=common_name LIKE '%${commonName}%'` +
'&$order=shift_start DESC' +
'&$limit=100';
const encodedURL = encodeURI(apiUrl);
fetch(encodedURL)
.then(function(result) {
return result.json(); // Promise for parsed JSON.
})
.then(function(data) {
let body = document.getElementByTagName("tbody")[0];
let headingRows = document.createElement("tr");
body.appendChild(headingRows);
let nameHead = document.createElement("th");
nameHead.innerHTML = 'Zone';
headingRows.appendChild(nameHead);
let startHead = document.createElement("th");
startHead.innerHTML = 'Shift Start';
headingRows.appendChild(startHead);
let endHead = document.createElement("th");
endHead.innerHTML = 'Shift End';
headingRows.appendChild(endHead);
for (let i = 0; i< data.length; i++) {
let createRows = document.createElement("tr");
body.appendChild(createRows);
let createName = document.createElement("td");
createName.innerHTML = data[i].plow_zone;
createRows.appendChild(createName);
let createStart = document.createElement("td");
createStart.innerHTML = data[i].shift_start;
createRows.appendChild(createStart);
let createEnd = document.createElement("td");
createEnd.innerHTML = data[i].shift_end;
createRows.appendChild(createEnd);
}
});
}
function load(){
document.getElementById("submit").addEventListener("click",
function(){fetch()});
}
document.addEventListener("DOMContentLoaded", load);
After running the page and searching for the Plow Zone, it produces the following output: https://i.sstatic.net/PWoc8.png
If anyone can spot where the issue lies, your help would be greatly appreciated. It seems like the event listener for the button might not be calling the fetch function correctly or there could be a problem with the Javascript.