title: Attaching image src from a json object using jQuery
body: <p>I am trying to retrieve content from a JSON object and display it on a page. I am able to retrieve the object and iterate through to pull out various content and display the in blocks of divs. The goal is to display the image avatar, the first name and the last name. With the below code I can display the first and last name, but the image always shows up as the last image in the list for every image. How can I grab the URL and append it to the image that I am creating in each div?</p>
  
  <pre><code>$(document).ready(function() {
      $.getJSON('http://www.url.com/?callback=?', function(data) {
         $.each(data, function(index, entry) {
              var html = '&lt;div class="entry"&gt;';
              html += '&lt;img/&gt;';
              var createImageURL = function() {
                  var thisImg = entry.AvatarUrl;
                  var thisPic = $('.entry img');  
                  $(thisPic).attr('src',thisImg);
              }
              createImageURL();   
              html += '&lt;h3 class="first-name"&gt;' + entry.FirstName + '&lt;/h3&gt;';
              html += '&lt;div class="last-name"&gt;' + entry.LastName + '&lt;/div&gt;';
  
              html += '&lt;/div&gt;';
              $('#dictionary').append(html);
         });
       });
   });
  </code></pre>
  
  <p>Here is an example of the JSON data:</p>
  
  <pre><code>{
  "AvatarUrl":"http://www.gravatar.com/avatar/35b2d5391e4a766e57d0d1f4a767f61f?s=120&amp;d=retro",
  "Id":4,
  "FirstName":"Aimee",
  "LastName":"Lacariere",
  "Location":"Seattle, Washington"
  }
  </code></pre>