javascript - Why does the Flickr public feed API return "undefined" before displaying photo results when accessed by jQuery? -

i started working apis/ajax/json , began small project test knowledge.

i made website type word form , brings flickr photos associated word.

it works pretty well, includes simple "undefined" before first photo messes display of first row of pictures.

an example can seen here, search photo tag , you'll see i'm talking about:

http://codepen.io/anon/pen/jpexnm

here related jquery:

$('form').submit(function (evt) { evt.preventdefault(); // ajax part var flickerapi = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; var query = $('#photoquery').val(); var flickroptions = {   tags: query,   format: "json" }; function displayphotos(data) {   var photohtml;   $.each(data.items,function(i,photo) {     photohtml += '<div class="photo">';     photohtml += '<a href="' + photo.link + '" class="image">';     photohtml += '<img src="' + photo.media.m + '"></a></div>';   }); // end each   $('#photogallery').html(photohtml); } $.getjson(flickerapi, flickroptions, displayphotos);  }); // end submit 

i haven't found errors related in javascript console , couldn't find while googling, i'm turning stackoverflow. thank , help.

because

var photohtml; 

is same thing as

var photohtml = undefined; 

basic example of doing

var str; str = str + "123"; // undefined + "123" = "undefined123"; 

you need set empty string

var photohtml = "";