0

I am trying to get json data from an url 'https://www.weatherinnovations.com/coop/weather.json' in a tabular from and used method $.getJSON but the data is not showing in the page. the url is contain .json extension i want to how can show the in my table from the url

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



<table class="table table-striped">
    <tr  class="bg-info">
        <th>Date</th>
        <th>Max Temperature</th>
        <th>Min Temperature</th>
        <th>Average Temperature</th>
        <th>Precipitation</th>
    </tr>

    <tbody id="myTable">
        
    </tbody>
</table>

HTML Form

JS Script


    var myArray = []
  
  
    


$.getJSON('https://www.weatherinnovations.com/coop/weather.json', function(data) {
    // JSON result in `data` variable
        myArray = response.data
            buildTable(myArray)
            console.log(myArray)
    
})

    buildTable(myArray)

    function buildTable(data){
        var table = document.getElementById('myTable')

        for (var i = 0; i < data.length; i++){
            var row = `<tr>
                            <td>${data[i].DateTime}</td>
                            <td>${data[i].Tmax}</td>
                            <td>${data[i].Tmin}</td>
              <td>${data[i].Tavg}</td>
              <td>${data[i].Precip}</td>
                      </tr>`
            table.innerHTML += row


        }
    }
Rizvi Ahmed Zillhaz
  • 57
  • 1
  • 9
  • Do you get an error? It is very probable you are seeing something like `Access to fetch at 'https://www.weatherinnovations.com/coop/weather.json' from origin '....' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.` in your console. If so, it is because you do not have a permission to access that page from your web page. – Amadan Mar 30 '22 at 02:31
  • yes i am getting this error in the console – Rizvi Ahmed Zillhaz Mar 30 '22 at 02:37

1 Answers1

0

Since you are getting a CORS policy error, which basically means the owners of the URL don't want you to use their URL in this way, there are only two ways to resolve this:

  • Ask the people at www.weatherinnovations.com to let you use their service by adding your site to their ACAO header (typically unlikely, unless you are affiliated with them or have a contract of some sort), or

  • Since CORS restrictions only apply to clientside, you can access the URL on your backend, and deliver the contents to your frontend.

Amadan
  • 191,408
  • 23
  • 240
  • 301
  • It's maybe worth mentioning that this CORS error is because the Web browser rejects the response, not because the Web server rejects to answer the request. This can be mitigated by adding a CORS header to the response, which the service maintainers have to include. – Green绿色 Mar 30 '22 at 02:49
  • @Green绿色 Yes; CORS policies are enforced by browsers. The servers cannot enforce CORS because they would need to know the originating web page's URL, and a web server has no way to check that `Referer` header was not spoofed (which is very easy to do). But the end result is that no modern browser will let you access a page from a page on a different domain unless the page's owner responds with an ACAO header that allows it. – Amadan Mar 30 '22 at 02:53