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

好的，这是一个奇怪的，但看起来如果你在创建对象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: ''
}

在对flickr.photos.search API

1 个答案: