ajax - show album art for a queried artist -
i want show album art artist on website using spotify's api. here's code…am calling api correctly? or, going wrong somewhere else?
how site should work: user searches artist , api returns album covers artist in grid view.
code: https://jsfiddle.net/zcardais/c2sngpux/
<div class="grid-container centered"> <div class="grid-100"> <div class="contained"> <div class="grid-100"> <div class="heading"> <h1>search spotify</h1> <form id="form"> <label for="search">search artist </label> <input type="search" name="search" id="searchstring"> <label for="select">search type </label> <select id="searchoption"> <option selected disabled>choose…</option> <option value="artist">artist</option> <option value="album">album</option> <option value="song">song</option> <option value="playlist">playlist</option> </select> <input type="submit" value="search" id="submit"> </form> </div> </div> <ul id="results"> </ul> </div> </div> </div>
$(document).ready(function() { var spotifyapi = "https://api.spotify.com/v1/search"; $('form').submit(function (evt) { var $submitbutton = $('#submit'); var $query = $('#searchstring'); var $type = $('#searchoption') evt.preventdefault(); $query.prop("disabled",true); $submitbutton.attr("disabled", true).val("searching...."); var artist = $query.val(); var type = $type.val(); $('#results').html(''); $.getjson(spotifyapi, { q: artist, type: type }, function(data){ var photohtml = ''; if (data.items.length > 0) { $.each(data.items,function(i,photo) { photohtml += '<li class="grid-25 tablet-grid-50">'; photohtml += '<a href="' + photo.link + '" class="image">'; photohtml += '<img src="' + photo.media.m + '"></a></li>'; }); // end each } else { photohtml = "<p>no photos found match: " + animal + ".</p>" } $('#photos').html(photohtml); $searchfield.prop("disabled", false); $submitbutton.attr("disabled", false).val("search"); }); // end getjson }); // end click }); // end ready
Comments
Post a Comment