Question 110272 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Extract data from JSON in URL (real-time)

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>


  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search