Autocomplete with nested ajax calls

Autocomplete with nested ajax calls

I am currently working on implementing an album search autocomplete using the Spotify Metadata API. I have most of the features complete, but I am having trouble when doing a nested call to retrieve the album cover art. Here I believe is the root of my problem. When I do the ajax call to retrieve the image it does work, and I get the right data, but the return statement is not getting executed. What I am trying to do is get the first four results, for each get an image and return the label, item and image. Thanks in advanced. I appreciate your help!

  2. function getAutocompleteResults(url) {
  3.       var d = new $.Deferred();
  4.       $.get(url, function(data) {
  5.           d.resolve(data);
  6.       });
  7.       return d;
  8.     }

  10.     function getCoverArtForResults(url) {
  11.       var d = new $.Deferred();
  12.       $.ajax({
  13.           url: url,
  14.           dataType: "jsonp",
  15.           success: function (image) {
  16.             d.resolve(image);
  17.           }
  18.       });
  19.       return d;
  20.     }

  22.     $('#spotify-album-search').autocomplete({
  23.       source:
  24.         function (query, process) {
  25.           $.when(
  26.               getAutocompleteResults('http://ws.spotify.com/search/1/album.json?q=' + query.term)
  27.           ).then(function (data) {
  28.             process($.map(data.albums.slice(0, 4), function(item) {
  29.               $.when (
  30.                 getCoverArtForResults('https://embed.spotify.com/oembed/?url=' + item.href)
  31.               ).then(function (image) {
  32.                 return { label: item.artists[0].name + ' - ' + item.name, album: item, image: image.thumbnail_url };
  33.               });
  34.             }));
  35.           });
  36.       },
  37.       select: function (e, ui) {
  38.         console.log("selected= " + ui.item.album);
  39.       },
  40.       messages: {
  41.         noResults: '',
  42.         results: function() {}
  43.       }
  44.     })
  45.     .data('ui-autocomplete')._renderItem = function(ul, item) {
  46.       return $('<li>')
  47.           .data( "ui-autocomplete-item", item)
  48.           .append('<a>' + item.label + '<img src="' + item.image + '" alt="" />' + '</a>')
  49.           .appendTo(ul);
  50.     };