I am a green hand in building websites. The Hong Kong government recently released real-time open data on vacant parking spaces. I would like to display vacant spaces in a parking lot on my Weebly website. Could anyone help me with this by using the embed code? Thanks a lot!
For example, the vacancy of the car park is "12" now, I want to display "12" on my Weebly page.
Open data website provided by the government: https://sps-opendata.pilotsmartke.gov.hk/rest/getCarparkVacancy?carparkId=10
This is my try, but it shows all data, how can I achieve the data for "vacancy" only.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Fetch a file to change this text.</p>
<script>
let file = "https://sps-opendata.pilotsmartke.gov.hk/rest/getCarparkVacancy?carparkId=10"
fetch (file)
.then(x => x.text())
.then(y => document.getElementById("demo").innerHTML = y);
</script>
</body>
</html>
CodePudding user response:
I have successfully written it myself. Thank you for all the guidance, and I will put my code here for others' reference.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Fetch a file to change this text.</p>
<script>
let file = "https://sps-opendata.pilotsmartke.gov.hk/rest/getCarparkVacancy?carparkId=10"
fetch (file)
.then(x => x.json())
.then(y => document.getElementById("demo").innerHTML = y.results.privateCar.vacancy);
</script>
</body>
</html>
CodePudding user response:
// function that pulls the data from the api and displays it on the html page
function search() {
const url = `https://sps-opendata.pilotsmartke.gov.hk/rest/getCarparkVacancy?carparkId=10`
fetch(url)
.then (response => response.json())
.then (data => {
vacancy = data.results.privateCar.vacancy
document.getElementById("htmlIdOfWhereIWantThisToDisplay").textContent = vacancy
})
}
// call the function
search()