I have a script that pulls my Tumblr feed, and then outputs the 5 latest posts. The problem I'm having is the loop for the tag array. The loop works, but it applies the tags to the first iteration of post loop, and not to the iteration the tags actually belong to. Any ideas how I can "lock" the post tags to the correct post?
The post loop determines if the text-type post has a Read More link or not by checking for body_abstract. Then it constructs the post. THEN it should place the tags where they belong. In the return I current have one of the five posts with tags, and its the third post, but the tags keep getting amended to the first post. Thoughts?
for(i=0; (i < data.response.total_posts) && (i < 5); i++){
if (data.response.posts[i].type == "text"){
if (data.response.posts[i].hasOwnProperty('body_abstract')){
$('article').append(
'<div class="blogtitle">'
+ '<a href="' + data.response.posts[i].short_url + '">'
+ '<h2>' + data.response.posts[i].title + '</h2>'
+ '</a>'
+ '</div>'
+ '<div class="row">'
+ '<div class="postedby col-sm-6 col-md-6">'
+ '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />'
+ '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />'
+ '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>'
+ '</div>'
+ '<div class="col-sm-6 col-md-6" id="tags">'
+ '<span class="glyphicon glyphicon-bookmark"></span>'
+ '</div>'
+ '</div>');
if (data.response.posts[i].tags.length == 0){
$('#tags').append('<p>No Tags</p>');
}
else {
for (j=0; j < data.response.posts[i].tags.length; j++){
var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-");
tagLinks.push(dashedTag);
$('#tags').append(
'<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a> '
);
};
};
}
else {
$('article').append(
'<div class="blogtitle">'
+ '<a href="' + data.response.posts[i].short_url + '">'
+ '<h2>' + data.response.posts[i].title + '</h2>'
+ '</a>'
+ '</div>'
+ '<div class="row">'
+ '<div class="postedby col-sm-6 col-md-6">'
+ '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />'
+ '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />'
+ '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>'
+ '</div>'
+ '<div class="col-sm-6 col-md-6" id="tags">'
+ '<span class="glyphicon glyphicon-bookmark"></span>'
+ '</div>'
+ '</div>');
if (data.response.posts[i].tags.length == 0){
$('#tags').append('<p>No Tags</p>');
}
else {
for (j=0; j < data.response.posts[i].tags.length; j++){
var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-");
tagLinks.push(dashedTag);
$('#tags').append(
'<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a> '
);
};
};
};
This behaviour is because $("#tags") which uses ID selector only returns the first element of the same IDs So what you need to do is give each tags DIV a specific ID and use the ID selector to target the correct DIV element(your tags container).
for(i=0; (i < data.response.total_posts) && (i < 5); i++){
if (data.response.posts[i].type == "text"){
if (data.response.posts[i].hasOwnProperty('body_abstract')){
$('article').append(
'<div class="blogtitle">'
+ '<a href="' + data.response.posts[i].short_url + '">'
+ '<h2>' + data.response.posts[i].title + '</h2>'
+ '</a>'
+ '</div>'
+ '<div class="row">'
+ '<div class="postedby col-sm-6 col-md-6">'
+ '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />'
+ '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />'
+ '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>'
+ '</div>'
+ '<div class="col-sm-6 col-md-6" id="tags_"'+i+'>'
+ '<span class="glyphicon glyphicon-bookmark"></span>'
+ '</div>'
+ '</div>');
if (data.response.posts[i].tags.length == 0){
$('#tags_'+i).append('<p>No Tags</p>');
}
else {
for (j=0; j < data.response.posts[i].tags.length; j++){
var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-");
tagLinks.push(dashedTag);
$('#tags_'+i).append(
'<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a> '
);
};
};
}
else {
$('article').append(
'<div class="blogtitle">'
+ '<a href="' + data.response.posts[i].short_url + '">'
+ '<h2>' + data.response.posts[i].title + '</h2>'
+ '</a>'
+ '</div>'
+ '<div class="row">'
+ '<div class="postedby col-sm-6 col-md-6">'
+ '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />'
+ '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />'
+ '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>'
+ '</div>'
+ '<div class="col-sm-6 col-md-6" id="tags_'+i+'">'
+ '<span class="glyphicon glyphicon-bookmark"></span>'
+ '</div>'
+ '</div>');
if (data.response.posts[i].tags.length == 0){
$('#tags_'+i).append('<p>No Tags</p>');
}
else {
for (j=0; j < data.response.posts[i].tags.length; j++){
var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-");
tagLinks.push(dashedTag);
$('#tags_'+i).append(
'<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a> '
);
};
};
};