Extract data from JSON in URL (real-time)-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：

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