从 URL 获取 json 响应

Question

I understand that this question asked MANY times, but I can't figure out how to make it work in my circumstances

It is a simple thing. I have url = WWW, but opening it in web browser you will see JSON.

I need to use JavaScript to get this JSON from URL and use it further.

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

DOes anyone know how to solve it? Ideally by using ASYNC

This is FULL CODE:

    <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 Looks like this :

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

Answer 1

data = data

This will not work as you expect.

I would recommend passing the data into your initMap method: initMap(data)

function initMap(data) {    

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

    });
}

Answer 2

You would be better using a construct like this so you're not using a global variable, that's frowned upon. using a top level global variable like data you could stomp on any other modules that are using a global data variable (they shouldn't be, but...). Also, the line data = data is not going to assign to the global data variable, since the data variable that's in scope is the one inside the done block (I changed it to 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

Here is one way to loop through 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>