從 URL 獲取 json 響應

Question

我知道這個問題問了很多次，但我不知道如何讓它在我的情況下工作

這是一件簡單的事情。 我有 url = WWW，但是在 Web 瀏覽器中打開它，您將看到 JSON。

我需要使用 JavaScript 從 URL 獲取這個 JSON 並進一步使用它。

<script>
var data;

$.getJSON("http://XXX?callback=?").done(function( data ) {
    console.log('hello', data);
    data = data;
    initMap();
});

function initMap() {    

  //response from URL have to be used here
  data.forEach((item) => {

    });
}

    </script>

有誰知道如何解決它？ 理想情況下使用 ASYNC

這是完整代碼：

    <script>
// data from server
$.getJSON("http://XXX?callback=?").then(function( data ) {
    console.log('hello', data);
    initMap(data);
});

// place you want to initially center the map on
const center = {
  lat: 51.509865,
  lng: -0.118092
}

function initMap(data) {
  // set up map
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: center.lat, lng: center.lng}
  });

  // loop over data from server
  data.forEach((item) => {
    // build a infowindow add dump the product table into it.
    var infowindow = new google.maps.InfoWindow({
      content: item.Products
    });

    // add and position the marker on the map
    var marker = new google.maps.Marker({
      position: {lat: item.Latitude, lng: item.Longitude},
      map: map,
      title: item.StoreName
    });

    // and event for opening the infowindow
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
  });
}

google.maps.event.addDomListener(window, 'load', initMap);

</script>

JSON 看起來像這樣：

[
    {
        "LatLan": "-3,22",
        "Latitude": 22,
        "Longitude": -3,
        "StoreName": "XXX",
        "Products": "XXX"
    },
    // carry on...
]

Answer 1

data = data

這不會像您期望的那樣工作。

我建議將數據傳遞到您的initMap方法中： initMap(data)

function initMap(data) {    

  //response from URL have to be used here
  data.forEach((item) => {

    });
}

Answer 2

您最好使用這樣的構造，這樣您就不會使用全局變量，這是不受歡迎的。 使用像 data 這樣的頂級全局變量，您可以踩踏使用全局數據變量的任何其他模塊（它們不應該，但是......）。 此外，行data = data不會分配給全局數據變量，因為范圍內的數據變量是 done 塊內的變量（我將其更改為 then()）。

$.getJSON("http://XXX?callback=?").then(function( data ) {
    console.log('hello', data);
    initMap(data);
});

function initMap(data) {    

  //response from URL have to be used here
  data.forEach((item) => {

    });
}

Answer 3

這是循環 JSON 的一種方法：

 var tableRow = ''; $.ajax({ url: 'https://randomuser.me/api/?&results=50&inc=name,email', method: 'GET', success: function(data) { var items = ''; for (var i = 0; i < data.results.length; i++) { items += '<tr><td>' + data.results[i].name.first + ' ' + data.results[i].name.last + '</td><td>' + data.results[i].email + '</td><td>' + data.results[i].email + '</td></tr>'; } $("#dataTable tbody").html(items); console.log(data); }, error: function() { var tableRow = '<tr><td>There is no data to display</td></tr>'; console.log(tableRow); $("#dataTable tbody").html(tableRow); } });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <table class="table" id="dataTable"> <thead> <tr> <th>Full Name</th> <th>Email</th> <th>Address</th> </tr> </thead> <tbody></tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>