I am trying to build out a gallery of photo items in javascript from facebook. The gallery is presented in a table with 5 images in each row. Every time I try to add something on to the outtable variable it empties
my code-
function getImages(){
var $outTable ='';
FB.api('/me', function(response) {
var query = FB.Data.query('SELECT aid, owner, name from album WHERE owner={0}', response.id);
query.wait(function(rows) {
var x = 0;
for(x in rows){
$outTable += '<table id="album" celpadding="0" cellspacing="0">';
var images_query = FB.Data.query('SELECT aid, src_small FROM photo WHERE aid={0}', rows[x].aid);
images_query.wait(function(image) {
var y = 0;
while(y < image.length){
var row_count = 0;
$outTable += '<tr>';
while(row_count < 5){
if(image[y] != undefined){
$outTable += '<td><img class="draggable" src="'+image[y].src_small+'" width="'+image[y].src_small_height+'" height="'+ image[y].src_small_width+'"></td>';
}else{
$outTable += '<td></td>';
}
y++;
row_count++;
}
$outTable += '</tr>';
//console.log($outTable);
}
console.log($outTable);
})
x++;
}
$outTable += '</table>';
});
console.log($outTable);
$($outTable).appendTo('#albums');
});
}