Estoy tratando de obtener datos json de una URL 'https://www.weatherinnovations.com/coop/weather.json' en un método tabular y usado $.getJSON pero los datos no se muestran en la página. la url contiene la extensión .json, quiero saber cómo puedo mostrarla en mi tabla desde la 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>

Formulario HTML

Guión JS

 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 } }