title: passing variables to jQuery ajax success or error functions
body: <p>I am using JQuery $.ajax to loop through a set of JSON URLs and download results into an array. Some of the URLs return a 404 -- which I'm handling &amp; showing as a div message. </p>
  
  <p>However, I can't seem to pass the URL, more precisely it always only passes the last URL in the array. </p>
  
  <p>I assume that's because ajax is asynchronous and takes longer to complete, but I'm not sure how else to make sure only the current JSON url (or variable) is being shown on SUCCESS or ERROR</p>
  
  <p>My Code:</p>
  
  <pre><code> // For every URL loop through 'baseitems' array
   for (var i = 0; i &lt; baseitems.length; i++) {
  
    // This is where I'm hoping to store the current URL as a variable to pass to the end-user on Success or Error
    var caturl = baseURL + "/" + baseitems[i];
  
    // Get the data via JSON
    $.ajax({
      type: "GET",
      url: caturl,
      dataType: "json",
      async: true, // set so that the variables caturl get updated below
      success: function (result) {
          // Success: store the object into catalog array
          cat.unshift(result);
          $('#showdata').prepend("Loaded: " + caturl + "&lt;/br&gt;");  // still buggy here - probably async JSON issue
      },
      error: function (xhr, textStatus, error) {
          // Error: write out error
          console.log(xhr.statusText);
          console.log(textStatus);
          console.log(error);
          $('#showdata').prepend("ERROR : '" + error + "' trying to access: " + caturl + "&lt;/br&gt;");  // still buggy here  - probably async JSON issue
      }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>** UPDATE: WORKING CODE **</p>
  
  <p>The completed working code with @charlietfl help + a few nice things like Success / Error code + count of URLs loaded is below. Thanks charlietfl &amp; peacemaker!</p>
  
  <pre><code>                $.ajax({
                      type: "GET",
                      url: caturl,
                      dataType: "json",
                      async: true, // set so that the variables caturl get updated below
                      beforeSend: function (jqXHR, settings) {
                          /* add url property and get value from settings (or from caturl)*/
                          jqXHR.url = settings.url;
                      },
                      success: function (result, textStatus, jqXHR) {
                          // Success: store the object into catalog array
                          var url = jqXHR.url;
                          cat.unshift(result);
                          $('#showdata').prepend("&lt;font size=\"1\"&gt;Loading: " + url + " status: " + textStatus + "&lt;/font&gt;&lt;/br&gt;");
                          successcount += 1;
  
                      },
                      /* error to be deprecated in jQuery 1.8 , superseded by "fail" */
                      error: function (jqXHR, textStatus, error) {
                          var url = jqXHR.url;
                          /* replace caturl with url in your append */
                          $('#showdata').prepend("&lt;font size=\"1\" color=\"red\"&gt;ERROR : '" + error + "' trying to access: " + url + "&lt;/font&gt;&lt;/br&gt;");
                      },
                      complete: function (jqXHR, textStatus) {
                          $('#showdata').prepend("&lt;font size=\"3\"&gt;Loaded &lt;b&gt;" + successcount + "&lt;/b&gt; of " + baseitems.length + " total catalogs.&lt;/font&gt;&lt;/br&gt;")
                      }
                  });
  </code></pre>