Javascript Variable Scope Question

I have the following javascript for a YouTube API application.  It takes an array of YouTube video ID's (bottomVids) and a Title string (theTItle) and loops through each video, using the YouTube API to get the thumbnails.

At the begining of the function, I set "bottomDesc" as an empty variable.  This variable will be used to  build the HTML that I will later put into the page using jQuery.

For some reason, when I get out of the $.getJSON block, "bottomDesc" is empty - as if it hadn't been set.
If I do an alert inside the $.getJSON block, the value is set.

I thought the variable would stay in scope for the whole function, but for some reason it's not.  Any ideas on what i can do to pass values to and use a variable this way?  

function changevids(bottomVids, theTitle) {	

		var videoDesc = "";
		var subDesc = "";
		var stats = "";
		var bottomDesc = "";
		var derClassin = "triovid";
		var videoImg, trioImg, viewCount;
		var bottomNums = bottomVids.length;
		alert("array length: " + bottomNums);
		var newtitle = theTitle;
		var g;
		var url = "";
		
//Middle Videos (3)
		for (i=0;i<bottomNums;i++){

			url = 'https://www.googleapis.com/youtube/v3/videos?id=' +bottomVids[i] + '&part=snippet,contentDetails,statistics,status'

			
			$.getJSON(url,function(data) {
				$('#trio_videos').html("");
				
				vidResults = data.pageInfo.resultsPerPage;
				for(var i=0;i<vidResults;i++) {
			   		vidID = data.items[i].id.videoId;
					title = data.items[i].snippet.title;
					hqImage = data.items[i].snippet.thumbnails.high;
					stats = data.items[i].statisitcs.viewCount;
					
					g = i + 1
					
					if (g % 3 == 0) {
						derClassin = derClassin + ' lastvid'; 		
					}else{
						derClassin = 'triovid';		
					}
					
					bottomDesc += '<div class="col-md-4 '+derClassin+'"><a onclick="swapvids(\''+ vidID +'\');" href="#"><img src="'+ title +'" width=200px height=122px border=0 /></a><p style="text-align:left;"><span class="vidTitle">'+ title +'</span><br/><span class="numViews">'+ stats +' views</span></p></div>';
				};
			});
			// an alert to check the variable - it's empty for some reason...
                       alert("144 bd: " + bottomDesc);
			
		}
		
		bottomDesc += '<div style="clear:both;"></div>';
                //this alert shows just the '<div style="clear:both;"></div>' - but none of the information that should've been set inside the loop.
		alert("BD" + bottomDesc);
		//alert(subDesc);
		$('#trio_videos').html(bottomDesc);
		$('#main_video').html('<iframe width="636" height="358" src="//www.youtube.com/embed/'+bottomVids[0]+'?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
		$('#vidDescription').html('<h2 style="font-family:arial; font-size:20px; color:#bc8e30; margin-top:15px; margin-bottom:0px; border-bottom:#bc8e30 solid 1px; padding-bottom:5px;">' + newtitle + '</h2>');
	};

Select allOpen in new window