{Solved} Extract data from JSON in URL-CodePudding

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

photo

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：

` // 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()`

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>