如何仅从迭代中检索第一张图片?

时间:2015-08-13 01:51:10

标签: javascript arrays json jsonp tumblr

也许我只是累了,但经过努力,我似乎​​无法为我遇到的这个问题找到解决方法。

我使用Tumblr的API访问特定的博客,并从博客中获取一些帖子。博客上的所有帖子都有标题,图像和网站链接。在我的代码中,我正在从API迭代JSON并将每个标题存储在标题数组中,每个图像链接存储在图像数组中,每个网站链接存在于链接数组中。我计划使用这样的数组:title [1],image [1],links [1],所以最后,所有的帖子都会在他们自己的图像和链接旁边。

标题和链接数组完美运行。但是,图像阵列不是。问题是来自Tumblr博客的一些帖子有2-3张照片,而不是1.这意味着在我的图像数组中插入了2-3张图像链接用于某些帖子。所以最后,我的三个数组的长度是: 标题:91,链接:91,图像:120。这是一个问题,因为例如第一个帖子在图像数组中插入2个图像。这意味着第一篇文章中的图像将与第二篇文章中的标题和链接进行分组。

有什么办法可以让代码只获取第一张图片吗?我阅读了文档,但无法找到任何内容。

代码:

$(data.response.posts).each(function(index, value){
if(value.type === "photo"){
    try{
        var newLink = value.source_url; 
        var newTitle = value.slug; 

        if(checkIfNotExists(newLink, links) && checkIfNotExists(newTitle, titles)){
            links.push(newLink);
            titles.push(newTitle); 
        }

        $(value.photos).each(function(idx, val){
            var newImage = val.original_size.url; 
            if(checkIfNotExists(newImage, images)){
                images.push(newImage); 
            }
        });
    }catch(err){
        console.log("err"); 
    }

}

//Function to ensure no duplicate
function checkIfNotExists(checkValue, fullArray){
    if(!fullArray.indexOf(checkValue)>-1 && checkValue!=='undefined' && checkValue!==undefined && checkValue!=='default'){
        return true; 
    }else{
        return false; 
    }
}

我很感激任何人都可以提供帮助。

2 个答案:

答案 0 :(得分:0)

首先,在确保所有checkIfNotExists次调用返回true之前,您应该确保不向数组推送任何内容。否则,您的索引可能不同步。

至于选择第一张图片,我会选择以下内容:

$(data.response.posts).each(function(index, value) {
    if(value.type !== "photo")
        return;

    var newLink = value.source_url; 
    var newTitle = value.slug; 

    // Make sure link is unique
    if(!checkIfNotExists(newLink, links))
        return;

    // Make sure title is unique
    if(!checkIfNotExists(newTitle, titles))
        return;

    // Find first unique image
    var newImage = null;
    for(var i = 0; !newImage && i < value.photos.length; ++i) {
        if(checkIfNotExists(value.photos[i].original_size.url, images))
            newImage = value.photos[i].original_size.url;
    }

    // Make sure we found an image
    if(!newImage)
        return;

    // Everything looks fine, push the values!
    links.push(newLink);
    titles.push(newTitle);
    images.push(newImage);
});

答案 1 :(得分:0)

我终于解决了这个问题!我发现问题出在我的迭代上,我只需重新安排我的代码,以确保缩略图迭代发生在我的链接和标题的迭代中。这是我在try块中重新排列的内容:

var newLink = value.source_url; 
var newTitle = value.slug; 

if(checkIfNotExists(newLink, links) && checkIfNotExists(newTitle, titles)){
    $(value.photos).each(function(idx, val){
        var newImage = val.original_size.url; 
        if(checkIfNotExists(newImage, images)){
            images.push(newImage); 
            links.push(newLink);
            titles.push(newTitle);