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

Question

也许我只是累了，但在非常努力之后，我似乎无法针对我遇到的这个问题想出解决方法。

我正在使用 Tumblr 的 API 转到特定的博客，并从博客中获取一些 post。博客上的所有 post 都有一个标题、一张图片和一个 website-link。在我的代码中，我从 API 迭代 JSON 并将每个标题存储在标题数组中，每个图像的 link 在图像数组中，每个 website-link 在一个 links 数组。我打算像这样使用这些数组：title[1]、image[1]、links[1]，所以到最后，所有 posts 都将在它们自己的图像旁边，并且 links。

标题和 links 数组工作得很好。但是，图像数组没有。问题是 Tumblr 博客中的一些 post 有 2-3 张照片，而不是 1 张。这意味着我的图像数组中插入了 2-3 image-links 一些 post秒。所以最后，我的三个数组的长度是： title: 91, links: 91, image: 120。这是一个问题，因为例如第一个 post 在图像数组中插入了 2 个图像。这意味着来自第一个 post 的图像将与标题和来自第二个 post 的 link 分组。

有什么方法可以让代码只获取第一张图片吗？我阅读了文档，但找不到任何东西。

代码：

$(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; 
    }
}

如果有人能提供任何帮助，我将不胜感激。

Answer 1

首先，在确保所有 checkIfNotExists 调用 return 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);
});

Answer 2

我终于解决了这个问题！我发现问题出在我的迭代上，我只需要重新安排我的代码以确保缩略图迭代与我的链接和标题的迭代一起发生。这是我在 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);

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

How to retrieve only the first picture from an iteration?

javascript

arrays

json

jsonp

tumblr