在向 flickr.photos.search API 发出 ajax get 请求后获取并显示数据后，src 属性未定义

Question

我发现这个问题特别有趣，因为我正在从服务器接收返回的数据，这些数据正在传递到一个数组中。我知道在 photoGallery 数组登录到控制台后我正在取回数据。但是，在displayImage()函数中，添加了html后，图中的src属性未定义。有什么线索吗？

Undefined Image
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)，你将取回数据数组。但是在循环完成后只有一张图像在 src 属性中实际上有一个 url，其余的都是未定义的。

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);
}

编辑 - 传递给 fetchImage() 函数的 jSON 对象如下所示：

{ "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" }

编辑 - 在 getSizes() 函数中调用的 jSON 对象如下所示：

{ "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

好吧，这很奇怪，但看起来如果你在创建对象 imageObject 时定义属性 url_small，将删除异常，我刚刚测试过在本地，我最初认为可能使用 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: ''
}

在向 flickr.photos.search API 发出 ajax get 请求后获取并显示数据后，src 属性未定义

src attribute is undefined after fetching and displaying data after an ajax get request is made to flickr.photos.search API

javascript

jquery

flickr