javascript - jQuery - Grabbing the youtube title, waiting for the titles to be downloaded -

i'm trying grab title of youtube video , print on page, under thumbnail of video.

everything works fine, got api key, , titles printing console. it's done ajax have make wait title come. , that's i'm stuck.

so how make code/loop wait ajax finish it's doing?

my simplified code. tried posting on code pen no luck making js work. https://codepen.io/anon/pen/jyyzwm

link live page it. works there , can see console returns titles. http://boiling-everglades-49375.herokuapp.com/video.php

$('.category-shape').on('click', function () {    var documentary = ["siapgguvpxa", 'i6hgldw1ys0', 'omg1gmntvpy', 'mfwhpnxrdi4', 'at0hduxw8ky'];    showvideos(documentary); }   function showvideos(channel) { if (!isfirstpass) {     $('#addedcontent').remove(); } $('#dropdownvideopicker').append('<div id="addedcontent"></div>'); console.log(" "); (var = 0; < channel.length; i++) {     var title = gettitle(channel[i]);     $.when(gettitle(channel[i])).done( function () {         var pagecode = generatepagecode(channel[i], title);         console.log(gettitle(channel[i]));         $('#addedcontent').append(pagecode);     }); } $('#addedcontent').hide(); $('#addedcontent').slidedown(); isfirstpass = false; $("html, body").animate({scrolltop: ($('.category-shape:nth-of-type(6)').offset().top)}, 1000); grabytid(); }   function grabytid() {     $('.videothumbnail').on('click', function () {       var $ytid = $(this).attr('src').slice(27, -6);       showmodalwindow($ytid);     }); }   function showmodalwindow(id) { var $themodal = $("#videomodal"),     iframe = $("#iframe")[0],     videosrc = 'https://www.youtube.com/embed/' + id,     videosrcauto = videosrc + "?autoplay=1&rel=0&controls=1&showinfo=0"; $(iframe).attr('src', videosrcauto); $('button.close').click(function () {     $(iframe).attr('src', videosrc); }); $themodal.on("hidden.bs.modal", function () {     $(iframe).attr('src', videosrc); }); } 

and that's function grabs titles

function gettitle(videoid) { $.ajax({     url: "https://www.googleapis.com/youtube/v3/videos?id=" + videoid + "&key=" + "aizasycdye576fu2qrbkhivxhfrjbejpwartzko" + "&fields=items(snippet(title))&part=snippet",     datatype: "jsonp",     success: function (data) {         var title = data.items[0].snippet.title;         console.debug("function: " + title);         var titleloaded = new customevent('titleloaded', {             detail: {                 loaded: true             }         });         $('body')[0].dispatchevent(titleloaded);         return title;     },     error: function (jqxhr, textstatus, errorthrown) {         alert(textstatus, +' | ' + errorthrown);     } }); } 

and yes, know giving api key public bad idea i'll change add website restriction in google.

you can push ajax deffered objects in array , call $.when.apply($,arr) wait call processed:

function showvideos(channel) {    if (!isfirstpass) {     $('#addedcontent').remove();   }   $('#dropdownvideopicker').append('<div id="addedcontent"></div>');    var arr = $.map(channel, function(data) {     gettitle(data);   });    $.when.apply($, arr).then(function() {     $('#addedcontent').hide();     $('#addedcontent').slidedown();     isfirstpass = false;     $("html, body").animate({       scrolltop: ($('.category-shape:nth-of-type(6)').offset().top)     }, 1000);     grabytid();   }); }  function gettitle(videoid) {    return $.ajax({     url: "https://www.googleapis.com/youtube/v3/videos?id=" + videoid + "&key=" + "aizasycdye576fu2qrbkhivxhfrjbejpwartzko" + "&fields=items(snippet(title))&part=snippet",     datatype: "json",     success: function(data, status, jqxr) {       var title = data.items[0].snippet.title;       var titleloaded = new customevent('titleloaded', {         detail: {           loaded: true         }       });       $('body')[0].dispatchevent(titleloaded);       var pagecode = generatepagecode(videoid, title);       console.log(title);       $('#addedcontent').append(pagecode);     },     error: function(jqxhr, textstatus, errorthrown) {       alert(textstatus, +' | ' + errorthrown);     }   }); } 

you can find fiddle here