Feeling a bit weary, I have been struggling to find a solution to a current issue of mine.
My task involves utilizing Tumblr's API to access specific blogs and retrieve posts from them. Each post contains a title, an image, and a website link. My approach includes iterating over the API's JSON data and storing the titles in a title array, image links in an image array, and website links in a links array. The plan is to match each post with its respective image and link by using the arrays like this: title[1], image[1], links[1]. However, the problem arises when some blog posts contain 2-3 images instead of just one. As a result, the length of my arrays differs – title: 91, links: 91, image: 120. This discrepancy leads to mismatched pairings where an image from one post may be linked to the title and link of another post.
The title and links arrays function correctly, but the issue lies within the image array. Is there a way for me to modify the code so that only the first picture is fetched? Despite reviewing the documentation, I couldn't find a suitable solution.
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;
}
}
Any assistance on resolving this issue would be greatly appreciated.