Javascript - Get info for multiple images from their URL, then insert them into DOM -

Javascript - Get info for multiple images from their URL, then insert them into DOM -

i need height , width of image it's url , display image differently based on orientation of image (portrait or landscape). image through api request.

i'm using next code, , code need help begins line var img = new image; within attachments if statement in case: 'link' section of switch statement.

fb.api('/', 'post', { batch: [ { method : 'get', name : 'user', relative_url : '/me' }, { method: 'get', name : 'post-ids', relative_url: '/group-id/feed?fields=id', omit_response_on_success : false }, { method : 'get', name : 'post-data', relative_url : '?ids={result=post-ids:$.data.*.id}&fields=id,actions,application,from,to,message,message_tags,with_tags,picture,place,properties,source,status_type,link,description,caption,attachments,object_id,type,created_time,updated_time,likes.summary(1),comments.summary(1)', omit_response_on_success : false }, { method : 'get', name : 'post-likes', relative_url : '?ids={result=post-ids:$.data.*.id}/likes?limit=5000', omit_response_on_success : false }, { method : 'get', name : 'post-comments', relative_url : '?ids={result=post-ids:$.data.*.id}/comments?fields=id,actions,application,from,to,message,message_tags,with_tags,picture,place,properties,source,status_type,link,description,caption,attachments,object_id,type,created_time,updated_time,likes.summary(1)&limit=5000', omit_response_on_success : false } ] }, function (response) { var membody = json.parse(response[0].body); console.log('successful login for: ' + membody.name); var posts = json.parse(response[1].body); //console.log(posts); //console.log(posts.data[0].id); var feed = json.parse(response[2].body); for(var x = 0; x < posts.data.length; x++) { //console.log(posts.data[x].id); var post = feed[posts.data[x].id]; console.log(post); var entry = '<div class="post">'; var from_id = post.from.id, from_name = post.from.name, post_id = post.id, type = post.type, created_time = post.created_time; entry += '<div class="post-title"><a href="http://www.facebook.com/' + from_id + '">' + from_name + '</a> posted ' + type + ' - <time>' + relativetime(created_time); if(post.application) { var app_id = post.application.id, app_name = post.application.name, app_namespace = post.application.namespace; entry += ' via ' + app_name + '</time></div>'; } else { entry += '</time></div>'; } switch(post.type) { case 'status' : if(post.actions) { } if(post.message) { var message = nl2br(post.message); if(post.message_tags) { var message_tags = post.message_tags; (var tag in message_tags) { if (message_tags.hasownproperty(tag)) { var message_tag_id = message_tags[tag][0].id; message_tag_length = message_tags[tag][0].length; message_tag_name = message_tags[tag][0].name; message_tag_offset = message_tags[tag][0].offset; message_tag_type = message_tags[tag][0].type; var link = '<a href="http://www.facebook.com/' + message_tag_id + '">' + message_tag_name + '</a>'; message = message.replace(message_tag_name, link); } } } entry += '<div class="post-message" style="margin:8px 0;">' + message + '</div>'; } if(post.attachments) { var att = post.attachments.data[0]; if(att.description) var att_description = att.description; if(att.type) var att_type = att.type; if(att.title) var att_title = att.title; switch(att.type) { case 'unavailable' : entry += '<div class="status-att" style="border: 1px solid #ccc; padding: 8px;"><div class="status-att-title" style="font-weight: bold;">' + att_title + '</div><div class="status-att-desc">' + att_description + '</div></div>'; break; } } if(post.to) { var to_id = post.to.data[0].id, to_name = post.to.data[0].name; } if(post.updated_time) var updated_time = post.updated_time; if(post.likes) { } if(post.comments) { } break; case 'link' : console.log(json.stringify(post)); if(post.attachments) { var att = post.attachments.data[0]; if(att.type) var att_type = att.type + 'd'; else var att_type = 'posted'; } entry += '<div class="post-title"><a href="http://www.facebook.com/' + from_id + '">' + from_name + '</a> ' + ((att.type) ? 'shared' : 'posted') + ' ' + type + ' - <time>' + relativetime(created_time); if(post.application) { var app_id = post.application.id, app_name = post.application.name, app_namespace = post.application.namespace; entry += ' via ' + app_name + '</time></div>'; } else { entry += '</time></div>'; } if(post.message) { var message = nl2br(post.message); if(post.message_tags) { var message_tags = post.message_tags; (var tag in message_tags) { if (message_tags.hasownproperty(tag)) { var message_tag_id = message_tags[tag][0].id; message_tag_name = message_tags[tag][0].name; var link = '<a href="http://www.facebook.com/' + message_tag_id + '">' + message_tag_name + '</a>'; message = message.replace(message_tag_name, link); } } } entry += '<div class="post-message" style="margin:8px 0;">' + message + '</div>'; } if(post.attachments) { var att = post.attachments.data[0]; if(att.subattachments) { $(att.subattachments.data).each(function (i, item) { var sub_img_height = item.media.image.height, sub_img_width = item.media.image.width, sub_img_src = item.media.image.src, sub_target = item.target.url, sub_type = item.type; entry += '<img src="' + sub_img_src + '"/><br/>---<br/>' + target + '<br/>---<br/>' + title + '<br/>---<br/>'; }); } else { var target = att.target.url, title = att.title; entry += '<a class="link" href="' + (post.link ? post.link : target) + '" style="color: #000; text-decoration: none;">'; if(post.picture) { // there's photo if(post.picture.indexof('imdb') > -1) { entry += '<div style="float: left; width: 158px;"><img src="' + post.picture + '" style="width: 158px;"/></div>'; entry += '<div style="float: left; width: 400px; padding: 8px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;"><div class="link-title" style="padding-bottom: 8px; font-weight: bold;">' + title + '</div>'; if (post.description) entry += '<div class="link-desc" style="padding-bottom: 8px;">' + post.description + '</div>'; if (post.caption) entry += '<div class="link-caption" style="font-size: 14px; text-transform: uppercase; color: #888;">' + post.caption + '</div></div></a>'; entry += '<div class="clear"></div>'; } else { var image = post.picture.split('url='); var img = new image(); img.onload = function(){ var height = img.height, width = img.width; console.log(decodeuricomponent(decodeuri(picture[1]))); console.log('width: ' + width); console.log('height: ' + height); if(width > height) { // wide photo, above details entry += '<img src="' + decodeuricomponent(decodeuri(picture[1])) + '" style="max-width:576px; margin-bottom: 0;" />'; entry += '<div class="link-details" style="padding: 0 8px 8px 8px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;"><div class="link-title" style="padding-bottom: 8px; font-weight: bold;">' + title + '</div>'; if (post.description) entry += '<div class="link-desc" style="padding-bottom: 8px;">' + post.description + '</div>'; if (post.caption) entry += '<div class="link-caption" style="font-size: 14px; text-transform: uppercase; color: #888;">' + post.caption + '</div></div></a>'; entry += '<div class="clear"></div>'; } else { // tall photo, left of details entry += '<div style="float: left; width: 158px;"><img src="' + decodeuricomponent(decodeuri(picture[1])) + '" style="max-width: 158px;"/></div>'; entry += '<div style="float: left; width: 400px; padding: 8px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;"><div class="link-title" style="padding-bottom: 8px; font-weight: bold;">' + title + '</div>'; if (post.description) entry += '<div class="link-desc" style="padding-bottom: 8px;">' + post.description + '</div>'; if (post.caption) entry += '<div class="link-caption" style="font-size: 14px; text-transform: uppercase; color: #888;">' + post.caption + '</div></div></a>'; entry += '<div class="clear"></div>'; } } img.src = decodeuricomponent(decodeuri(picture[1])); } } else { // no image entry += '<div class="link-details" style="width: 558px; padding: 8px; border: 1px solid #ccc;"><div class="link-title" style="padding-bottom: 8px;">' + title + '</div>'; if (post.description) entry += '<div class="link-desc" style="padding-bottom: 8px;">' + post.description + '</div>'; if (post.caption) entry += '<div class="link-caption" style="padding-bottom: 8px;">' + post.caption + '</div></div></a>'; } } } break; case 'photo' : if(post.message) { var message = nl2br(post.message); if(post.message_tags) { var message_tags = post.message_tags; (var tag in message_tags) { if (message_tags.hasownproperty(tag)) { var message_tag_id = message_tags[tag][0].id; message_tag_name = message_tags[tag][0].name; var link = '<a href="http://www.facebook.com/' + message_tag_id + '">' + message_tag_name + '</a>'; message = message.replace(message_tag_name, link); } } } entry += '<div class="post-message" style="margin:8px 0;">' + message + '</div>'; } if(post.attachments) { var att = post.attachments.data[0]; if(att.subattachments) { var sub = att.subattachments; } else { switch(att.type) { case 'photo' : entry += '<a href="' + att.target.url + '" target="_blank"><img class="post-photo" style="max-height: 576px; max-width: 576px; margin: 8px 0;" src="' + att.media.image.src + '"/></a>'; break; case 'unavailable' : var att = post.attachments.data[0]; entry += '<div class="status-att" style="border: 1px solid #ccc; padding: 8px;"><div class="status-att-title" style="font-weight: bold;">' + att.title + '</div><div class="status-att-desc">' + att.description + '</div></div>'; break; } } } break; case 'video' : break; } $('#feed').append(entry); } });

there may 1 image or many, each 1 part of larger object in api results these images not handled together.

the problem i'm having images not displaying @ all, , when log them console, info 1 image logged: if there 4 images total, example, first image logged 4 times.

how can work out? need able display differently oriented images in different ways!

because image loading asynchronous, can't write code way you've done you're trying build entry variable various onload handlers. asynchronous timing of onload() handlers mess coding logic using entry variable , potentially mess ordering of operations too.

to handle asynchronous operations this, have restructure way collect info , when process it. there no getting around in javascript. need larn how this.

if show larger context of you're trying entry string, help restructure overall logic work in asynchronous way. can't code you've shown here because has involve larger image of you're doing.

without ability test such complicated code, can't guarantee error-free, can see concept here.

summary of changes:

keep counter called imgcntr tells how many images in flight know when lastly 1 done. initialize imgcntr = 1 guard never gets 0 until images have been requested. decremented @ end undo guard count. because trying build entry string synchronously, image info not available synchronously, needs go in right place in string, insert unique placeholder string looks "<<img1>>". later, when image info available, can replace unique marker desired html. in order protect variables used in creating temporary images aren't overridden other images, set them own closure. any outer variables such post.description need access within async onload handler must passed closure preserved uniquely each image. rather $('#feed').append(entry); @ end of function, check @ end of each img.onload handler see if imgcnt downwards 0 meaning image info has been retrieved , processed. @ end of function, not insert entry info unless there no images outstanding.

here's code changes (untested since have no way run it):

fb.api('/', 'post', { batch: [ { method : 'get', name : 'user', relative_url : '/me' }, { method: 'get', name : 'post-ids', relative_url: '/group-id/feed?fields=id', omit_response_on_success : false }, { method : 'get', name : 'post-data', relative_url : '?ids={result=post-ids:$.data.*.id}&fields=id,actions,application,from,to,message,message_tags,with_tags,picture,place,properties,source,status_type,link,description,caption,attachments,object_id,type,created_time,updated_time,likes.summary(1),comments.summary(1)', omit_response_on_success : false }, { method : 'get', name : 'post-likes', relative_url : '?ids={result=post-ids:$.data.*.id}/likes?limit=5000', omit_response_on_success : false }, { method : 'get', name : 'post-comments', relative_url : '?ids={result=post-ids:$.data.*.id}/comments?fields=id,actions,application,from,to,message,message_tags,with_tags,picture,place,properties,source,status_type,link,description,caption,attachments,object_id,type,created_time,updated_time,likes.summary(1)&limit=5000', omit_response_on_success : false } ] }, function (response) { // imgcntr set 1 guard won't 0 until images done var imgcntr = 1; var membody = json.parse(response[0].body); console.log('successful login for: ' + membody.name); var posts = json.parse(response[1].body); //console.log(posts); //console.log(posts.data[0].id); var feed = json.parse(response[2].body); for(var x = 0; x < posts.data.length; x++) { //console.log(posts.data[x].id); var post = feed[posts.data[x].id]; console.log(post); var entry = '<div class="post">'; var from_id = post.from.id, from_name = post.from.name, post_id = post.id, type = post.type, created_time = post.created_time; entry += '<div class="post-title"><a href="http://www.facebook.com/' + from_id + '">' + from_name + '</a> posted ' + type + ' - <time>' + relativetime(created_time); if(post.application) { var app_id = post.application.id, app_name = post.application.name, app_namespace = post.application.namespace; entry += ' via ' + app_name + '</time></div>'; } else { entry += '</time></div>'; } switch(post.type) { case 'status' : if(post.actions) { } if(post.message) { var message = nl2br(post.message); if(post.message_tags) { var message_tags = post.message_tags; (var tag in message_tags) { if (message_tags.hasownproperty(tag)) { var message_tag_id = message_tags[tag][0].id; message_tag_length = message_tags[tag][0].length; message_tag_name = message_tags[tag][0].name; message_tag_offset = message_tags[tag][0].offset; message_tag_type = message_tags[tag][0].type; var link = '<a href="http://www.facebook.com/' + message_tag_id + '">' + message_tag_name + '</a>'; message = message.replace(message_tag_name, link); } } } entry += '<div class="post-message" style="margin:8px 0;">' + message + '</div>'; } if(post.attachments) { var att = post.attachments.data[0]; if(att.description) var att_description = att.description; if(att.type) var att_type = att.type; if(att.title) var att_title = att.title; switch(att.type) { case 'unavailable' : entry += '<div class="status-att" style="border: 1px solid #ccc; padding: 8px;"><div class="status-att-title" style="font-weight: bold;">' + att_title + '</div><div class="status-att-desc">' + att_description + '</div></div>'; break; } } if(post.to) { var to_id = post.to.data[0].id, to_name = post.to.data[0].name; } if(post.updated_time) var updated_time = post.updated_time; if(post.likes) { } if(post.comments) { } break; case 'link' : console.log(json.stringify(post)); if(post.attachments) { var att = post.attachments.data[0]; if(att.type) var att_type = att.type + 'd'; else var att_type = 'posted'; } entry += '<div class="post-title"><a href="http://www.facebook.com/' + from_id + '">' + from_name + '</a> ' + ((att.type) ? 'shared' : 'posted') + ' ' + type + ' - <time>' + relativetime(created_time); if(post.application) { var app_id = post.application.id, app_name = post.application.name, app_namespace = post.application.namespace; entry += ' via ' + app_name + '</time></div>'; } else { entry += '</time></div>'; } if(post.message) { var message = nl2br(post.message); if(post.message_tags) { var message_tags = post.message_tags; (var tag in message_tags) { if (message_tags.hasownproperty(tag)) { var message_tag_id = message_tags[tag][0].id; message_tag_name = message_tags[tag][0].name; var link = '<a href="http://www.facebook.com/' + message_tag_id + '">' + message_tag_name + '</a>'; message = message.replace(message_tag_name, link); } } } entry += '<div class="post-message" style="margin:8px 0;">' + message + '</div>'; } if(post.attachments) { var att = post.attachments.data[0]; if(att.subattachments) { $(att.subattachments.data).each(function (i, item) { var sub_img_height = item.media.image.height, sub_img_width = item.media.image.width, sub_img_src = item.media.image.src, sub_target = item.target.url, sub_type = item.type; entry += '<img src="' + sub_img_src + '"/><br/>---<br/>' + target + '<br/>---<br/>' + title + '<br/>---<br/>'; }); } else { var target = att.target.url, title = att.title; entry += '<a class="link" href="' + (post.link ? post.link : target) + '" style="color: #000; text-decoration: none;">'; if(post.picture) { // there's photo if(post.picture.indexof('imdb') > -1) { entry += '<div style="float: left; width: 158px;"><img src="' + post.picture + '" style="width: 158px;"/></div>'; entry += '<div style="float: left; width: 400px; padding: 8px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;"><div class="link-title" style="padding-bottom: 8px; font-weight: bold;">' + title + '</div>'; if (post.description) entry += '<div class="link-desc" style="padding-bottom: 8px;">' + post.description + '</div>'; if (post.caption) entry += '<div class="link-caption" style="font-size: 14px; text-transform: uppercase; color: #888;">' + post.caption + '</div></div></a>'; entry += '<div class="clear"></div>'; } else { // create closure preserve variables uniquely each image // , pass in outer variables need preserve uniquely each image (function(imgcntr, description, caption, title) { var placeholder = "<<img" + imgcntr + ">>"; // insert placeholder in html can replace later entry += placeholder; var image = post.picture.split('url='); var img = new image(); img.onload = function(){ var height = img.height, width = img.width, html = ""; console.log(decodeuricomponent(decodeuri(picture[1]))); console.log('width: ' + width); console.log('height: ' + height); if(width > height) { // wide photo, above details html += '<img src="' + decodeuricomponent(decodeuri(picture[1])) + '" style="max-width:576px; margin-bottom: 0;" />'; html += '<div class="link-details" style="padding: 0 8px 8px 8px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;"><div class="link-title" style="padding-bottom: 8px; font-weight: bold;">' + title + '</div>'; if (description) html += '<div class="link-desc" style="padding-bottom: 8px;">' + description + '</div>'; if (caption) html += '<div class="link-caption" style="font-size: 14px; text-transform: uppercase; color: #888;">' + caption + '</div></div></a>'; html += '<div class="clear"></div>'; } else { // tall photo, left of details html += '<div style="float: left; width: 158px;"><img src="' + decodeuricomponent(decodeuri(picture[1])) + '" style="max-width: 158px;"/></div>'; html += '<div style="float: left; width: 400px; padding: 8px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;"><div class="link-title" style="padding-bottom: 8px; font-weight: bold;">' + title + '</div>'; if (description) html += '<div class="link-desc" style="padding-bottom: 8px;">' + description + '</div>'; if (caption) html += '<div class="link-caption" style="font-size: 14px; text-transform: uppercase; color: #888;">' + caption + '</div></div></a>'; html += '<div class="clear"></div>'; } // set html right place in entry string entry = entry.replace(placeholder, html); --imgcntr; // if images done if (imgcntr <= 0) { $('#feed').append(entry); } } img.src = decodeuricomponent(decodeuri(picture[1])); })(imgcntr++, post.description, post.caption, title); } } else { // no image entry += '<div class="link-details" style="width: 558px; padding: 8px; border: 1px solid #ccc;"><div class="link-title" style="padding-bottom: 8px;">' + title + '</div>'; if (post.description) entry += '<div class="link-desc" style="padding-bottom: 8px;">' + post.description + '</div>'; if (post.caption) entry += '<div class="link-caption" style="padding-bottom: 8px;">' + post.caption + '</div></div></a>'; } } } break; case 'photo' : if(post.message) { var message = nl2br(post.message); if(post.message_tags) { var message_tags = post.message_tags; (var tag in message_tags) { if (message_tags.hasownproperty(tag)) { var message_tag_id = message_tags[tag][0].id; message_tag_name = message_tags[tag][0].name; var link = '<a href="http://www.facebook.com/' + message_tag_id + '">' + message_tag_name + '</a>'; message = message.replace(message_tag_name, link); } } } entry += '<div class="post-message" style="margin:8px 0;">' + message + '</div>'; } if(post.attachments) { var att = post.attachments.data[0]; if(att.subattachments) { var sub = att.subattachments; } else { switch(att.type) { case 'photo' : entry += '<a href="' + att.target.url + '" target="_blank"><img class="post-photo" style="max-height: 576px; max-width: 576px; margin: 8px 0;" src="' + att.media.image.src + '"/></a>'; break; case 'unavailable' : var att = post.attachments.data[0]; entry += '<div class="status-att" style="border: 1px solid #ccc; padding: 8px;"><div class="status-att-title" style="font-weight: bold;">' + att.title + '</div><div class="status-att-desc">' + att.description + '</div></div>'; break; } } } break; case 'video' : break; } // decrement guard count, since images have been @ to the lowest degree requested --imgcntr; // if there no async part, entry done can straight appended // if there async part, appended in async callbacks when lastly 1 of them done if (imgcntr <= 0) { $('#feed').append(entry); } } });

fyi, consider technique used here bit of hack. isn't how write code if starting scratch, given volume of code , inability test write, rewriting in different way not practical me.

javascript image dom