title: For loop in Async Programming
body: <pre><code>userId = ['123', '456'];
  userName = ['aaa', 'bbb'];
  for (var j = 0; j &lt; userId.length; j++) {
              Instagram.otherUserMedia(userId[j], function (response) {
                  $('#otherInfo').append('&lt;h2&gt;' + userName[j] + '&lt;/h2&gt;');
                  for(var i = 0; i &lt; response.data.length; i++) {
                      $('#otherInfo').append('&lt;img src="' + response.data[i].images.thumbnail.url + '" /&gt;');
                  }
              });
          }
  </code></pre>
  
  <p>In this code snippet, I need to show corresponding <code>userName</code> with the output images from <code>response</code>. But when I execute this code, value of <code>j</code> increments till <code>userId.length</code> and then enters the callback.
  So, when I want to show the <code>userName[j]</code> it says <code>j</code> is <code>undefined</code> because it has loop through every value in <code>userId</code>.
  I want to get corresponding <code>userName</code> for every <code>userId</code>'s <code>response</code>.</p>