Блог

Я пытаюсь извлечь содержимое из объекта JSON и отобразить его на странице. Я могу извлечь объект и выполнить итерацию, чтобы извлечь различное содержимое и отобразить в блоках divs. Цель состоит в том, чтобы отобразить аватар изображения, имя и фамилию. С помощью приведенного ниже кода я могу отобразить имя и фамилию, но изображение всегда отображается как последнее изображение в списке для каждого изображения. Как я могу получить URL-адрес и добавить его к изображению, которое я создаю в каждом div?

 $(document).ready(function() {
    $.getJSON('http://www.url.com/?callback=?', function(data) {
       $.each(data, function(index, entry) {
            var html = '<div class="entry">';
            html  = '<img/>';
            var createImageURL = function() {
                var thisImg = entry.AvatarUrl;
                var thisPic = $('.entry img');  
                $(thisPic).attr('src',thisImg);
            }
            createImageURL();   
            html  = '<h3 class="first-name">'   entry.FirstName   '</h3>';
            html  = '<div class="last-name">'   entry.LastName   '</div>';

            html  = '</div>';
            $('#dictionary').append(html);
       });
     });
 });
  

Вот пример данных в формате JSON:

 {
"AvatarUrl":"http://www.gravatar.com/avatar/35b2d5391e4a766e57d0d1f4a767f61f?s=120amp;d=retro",
"Id":4,
"FirstName":"Aimee",
"LastName":"Lacariere",
"Location":"Seattle, Washington"
}
  

Сначала этот код:

 var thisPic = $('.entry img'); 
  

Вернет массив всех изображений, созданных в цикле each(). Возможно, вы имели в виду сделать значение класса в первых разделах уникальным?

Но на самом деле вам не нужно вызывать функцию для установки атрибута. Просто добавьте его непосредственно в строку:

 var html = '<div class="entry">';
html  = '<img src="'   entry.AvatarUrl   '" alt="avatar" />';
html  = '<h3 class="first-name">'   entry.FirstName   '</h3>';
html  = '<div class="last-name">'   entry.LastName   '</div>';
html  = '</div>';
  

Вы должны сделать это следующим образом:

 $(document).ready(function() {
    $.getJSON('http://www.url.com/?callback=?', function(data) {
       $.each(data, function(index, entry) {
            $html = $('<div class="entry" />');
            $html.append('<img/>');
            var createImageURL = function() {
                var thisImg = entry.AvatarUrl;
                var thisPic = $('.entry img', $html);  //This was your most conflicting line
                $(thisPic).attr('src',thisImg);
            }
            createImageURL();   
            $html.append('<h3 class="first-name">'   entry.FirstName   '</h3>');
            $html.append('<div class="last-name">'   entry.LastName   '</div>');

            $('#dictionary').append($html);
       });
     });
 });
  

Как вы можете видеть, мы используем append вместо объединения. Ваша ошибка была в var thisPic = $('.entry img'); селекторе, потому что он будет искать во всем документе. При этом:

 $('.entry img', $html);
  

мы выбираем изображение только внутри только что созданного html.
Надеюсь, это поможет. Приветствия

Я полагаю, проблема в том, что вы создаете несколько разделов для записи класса, а затем переназначаете src-файл img в div каждый раз, когда выполняете цикл по своему коду. Вместо вызова функции createurl добавьте эту строку:

 html  = '<img src="'   entry.AvatarUrl   '"/>'; 
  

и удалите функцию