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


        }
    }