Question

我知道这个问题问过很多次，但是我不知道如何使它在我的情况下起作用

这很简单。我有url = WWW，但是在网络浏览器中打开它，您会看到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不会分配给全局数据变量，因为范围内的数据变量是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>

从URL获取json响应

3 个答案: