Атрибут src не определен после извлечения и отображения данных после того, как в API flickr.photos.search сделан запрос на получение ajax

Question

Мне эта проблема особенно интересна, потому что я получаю данные обратно с сервера, который передается в массив.Я знаю, что возвращаю данные после входа в консоль массива photoGallery.Однако в функции displayImage() после добавления html атрибуты src внутри рисунка не определены.Есть какие-то подсказки?

Неопределенное изображение
PhotoGalleryArray

Вот пример кода:

let photoGallery = [];
let searchRequests;
let searchReceived;

$(document).ready(function () {
    let searchArray = ["dog", "cat", "horse", "tree", "bug"];
    searchFlickr(searchArray);
});

Послепри загрузке документа функция searchFlickr вызывается

function searchFlickr(searchArray) {
    photoGallery = [];
    searchRequests = searchArray.length;
    searchReceived = 0;
    let flickr_searchStr = "";
    $('#Gallery figure').fadeOut();
    searchArray.forEach(function (element) {
        flickr_searchStr = "https://api.flickr.com/services/rest/?method=flickr.photos.search&sort=relevance&content_type=7&format=json&nojsoncallback=1&per_page=1&text=" + element + API_KEY
        $.get(flickr_searchStr, function (data) {
            fetchImage(data);
        })
    })
}

Для каждого возвращаемого объекта jSON функция fetchImage вызывается

function fetchImage(data) {
    searchReceived++
    for (let i = 0; i < data.photos.photo.length; i++) {
        let imageObject = {id: data.photos.photo[i].id,title: data.photos.photo[i].title}
        photoGallery.push(imageObject);
        getSizes(imageObject);
    }
}

function getSizes(imageObject) {
    let getSizesStr = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1" + API_KEY + "&photo_id=" + imageObject.id;
    $.get(getSizesStr, function (data) {

        imageObject.url_small = data.sizes.size[3].source;
        //Check if searchRecieved is equal to the length of photosRequests then call displayImage function
        if (searchReceived == searchRequests) {
            displayImage(photoGallery);
        }
    });
}

. Здесь я не могу понять,что происходит, если вы console.log(photoGallery), вы получите обратно массив данных.Но после завершения цикла только одно изображение фактически имеет URL в атрибуте src, остальные не определены.

function displayImage(photoGallery) {
    let htmlStr = "";
    for (let i = 0; i < photoGallery.length; i++) {
        htmlStr += `<figure><img src="${photoGallery[i].url_small}"><figcaption>${photoGallery[i].title}</figcaption></figure>`;
    }
    $('#Gallery').html(htmlStr);
    $('#Gallery figure').fadeIn(500);
}

EDIT - объект jSON, переданный в функцию fetchImage(), выглядит следующим образом:

{ "photos": { "page": 1, "pages": "432757", "perpage": 1, "total": "432757", 
"photo": [
  { "id": "42046641202", "owner": "65984184@N05", "secret": "e94c9e7c26", "server": "910", "farm": 1, "title": "Painted Dogs", "ispublic": 1, "isfriend": 0, "isfamily": 0 }
] }, "stat": "ok" }

EDIT - объект jSON, вызываемый в функции getSizes(), выглядит следующим образом:

{ "sizes": { "canblog": 0, "canprint": 0, "candownload": 0, 
    "size": [
      { "label": "Square", "width": 75, "height": 75, "source": "https:\/\/farm6.staticflickr.com\/5254\/5412377706_d77700fc38_s.jpg", "url": "https:\/\/www.flickr.com\/photos\/parismadrid\/5412377706\/sizes\/sq\/", "media": "photo" },
      { "label": "Large Square", "width": "150", "height": "150", "source": "https:\/\/farm6.staticflickr.com\/5254\/5412377706_d77700fc38_q.jpg", "url": "https:\/\/www.flickr.com\/photos\/parismadrid\/5412377706\/sizes\/q\/", "media": "photo" },
      { "label": "Thumbnail", "width": 100, "height": 67, "source": "https:\/\/farm6.staticflickr.com\/5254\/5412377706_d77700fc38_t.jpg", "url": "https:\/\/www.flickr.com\/photos\/parismadrid\/5412377706\/sizes\/t\/", "media": "photo" },
      { "label": "Small", "width": "240", "height": "160", "source": "https:\/\/farm6.staticflickr.com\/5254\/5412377706_d77700fc38_m.jpg", "url": "https:\/\/www.flickr.com\/photos\/parismadrid\/5412377706\/sizes\/s\/", "media": "photo" },
      { "label": "Small 320", "width": "320", "height": "213", "source": "https:\/\/farm6.staticflickr.com\/5254\/5412377706_d77700fc38_n.jpg", "url": "https:\/\/www.flickr.com\/photos\/parismadrid\/5412377706\/sizes\/n\/", "media": "photo" },
      { "label": "Medium", "width": "500", "height": "333", "source": "https:\/\/farm6.staticflickr.com\/5254\/5412377706_d77700fc38.jpg", "url": "https:\/\/www.flickr.com\/photos\/parismadrid\/5412377706\/sizes\/m\/", "media": "photo" },
      { "label": "Medium 640", "width": "640", "height": "426", "source": "https:\/\/farm6.staticflickr.com\/5254\/5412377706_d77700fc38_z.jpg", "url": "https:\/\/www.flickr.com\/photos\/parismadrid\/5412377706\/sizes\/z\/", "media": "photo" },
      { "label": "Large", "width": "1024", "height": "682", "source": "https:\/\/farm6.staticflickr.com\/5254\/5412377706_d77700fc38_b.jpg", "url": "https:\/\/www.flickr.com\/photos\/parismadrid\/5412377706\/sizes\/l\/", "media": "photo" }
    ] }, "stat": "ok" }

Answer 1

Хорошо, это странно, но похоже, что если вы определяете свойство url_small при создании объекта imageObject, удалите исключение, я только что проверил его локально и сначала подумал, что, возможно, использую Object.definProperty() для добавления нового свойства к объекту imageObject может решить эту проблему вместе с использованием цикла for..in с проверкой Object.hasOwnProperty(), но, похоже, ничего не получится, если я не определю свойство во время объявления объекта, а затем добавлюзначение внутри getSizes().

Измените свой объект в fetchImage() на следующий

let imageObject = {
    id: data.photos.photo[i].id,
    title: data.photos.photo[i].title,
    url_small: ''
}