CODEWITHSUNDEEP
javascriptarraysjsonjsonptumblr
tash
tash

Reputation: 189

How to retrieve only the first picture from an iteration?

Maybe I'm just tired but after trying very hard, I can't seem to come up with a workaround for this problem I'm having.

I'm using Tumblr's API to go to specific blogs, and fetch some posts from the blog. All the posts on the blogs have a title, an image, and a website-link. In my code, I am iterating over the JSON from the API and storing each title in a title array, each image's link in an image array, and each website-link in a links array. I plan to use these arrays like this: title[1], image[1], links[1], so by the end, all the posts will be beside their own image and links.

The title and links arrays work perfectly. However, the the image array doesn't. The problem is that some of the posts from the Tumblr blog's have 2-3 photos with them, instead of 1. This means that 2-3 image-links are inserted in my image array for some posts. So in the end, the length of my three arrays are: title: 91, links: 91, image: 120. This is an issue because say for example the first post inserts 2 images in the image array. That means the image from the first post would be grouped with the title and link from the second post.

Is there any way I can make the code fetch the first picture only? I read over the docs but couldn't find anything.

Code: 

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

I'd appreciate any help anyone can provide.

Upvotes: 0

Views: 69

Answers (2)

tash
tash

Reputation: 189

I finally solved the issue! I found that the problem was with my iterating, and I just had to rearrange my code to make sure the thumbnail iterating was happening with the iterations for my links and titles. This is what I rearranged in the try block: 

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

Upvotes: 0

Joshua Coussard
Joshua Coussard

Reputation: 204

First, you should make sure to not push anything to your arrays before making sure all checkIfNotExists calls return true. Otherwise your indexes might not be in sync.

As for picking the first image, I'd go with something like this:

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

Upvotes: 0

Related Questions