Issue with multiple callbacks getJSON jquery

Question

I need to create some marker pop ups that show information from different ajax requests on a map. To make the second call I use an userID that I get from the first call. The information from the second call it shown good, but all the pop ups shown the same name, of the last item from the first call, why this happend, can anyone help me please? many thanks in advance!!!.

$.getJSON('url', function (data) { // first call
      for (var i = 0; i < data.length; i++) {            
        var name= data[i].name;
        var location= data[i].location;
        var userID = data[i].userID;
        var myIcon= data[i].icon;   
        var marker = new L.Marker(location, {title: name, icon: myIcon});// create the marker           
        $.getJSON('https://api.site.com/data/'+userID+'',(function(marker){ // second call using userID
          return function(data2) {
          var info1 = data2.response.tips.items[0].text;
          var info2 = data2.response.tips.items[1].text;
          marker.bindPopup("<div class='popup'>" + name +"</br>"+ info1 +"</br>"+ info2 + "</div>", {maxWidth: '600'}) // create the popup and add it to the marker                     
                }
         })(marker)
        );
      shops.addLayer(marker); // add marker to map layer
      }

Answer 1

You need to capture name in the closure, just as you do for marker .

    $("#loadingDiv").show();
    $.getJSON('https://api.site.com/data/'+userID+'',(function(marker, name){ // second call using userID
      return function(data2) {
      var info1 = data2.response.tips.items[0].text;
      var info2 = data2.response.tips.items[1].text;
      marker.bindPopup("<div class='popup'>" + name +"</br>"+ info1 +"</br>"+ info2 + "</div>", {maxWidth: '600'}) // create the popup and add it to the marker
      $("#loadingDiv").hide();                   
            }
     })(marker, name)

<div id="#loadingDiv" style="display: none">Loading...</div>