Question

I’m trying to allow a user to type an artist into a text box and then press a button to make a call to the Echo Nest API.

Here is a sample call:
http://developer.echonest.com/api/v4/playlist/basic?api_key=N6E4NIOVYMTHNDM8J&artist=Weezer&format=json&results=20&type=artist-radio

How would I construct the API call to include that information with the user input from the textbox. For example in the above call the the user input would be “Weezer”.

Here is the link: http://developer.echonest.com/docs/v4/playlist.html

Answer 1

This solution uses jQuery and assumes the following html. Note that it also uses JSONP since you are making the request from the client to avoid cross domain security restrictions. To make this work, I’ve changed the format type and added a callback. The getJSON call uses the presence of the callback variable to inject an anonymous callback function that will call your actual callback.

 <label for="artist">Artist</label>
 <input type="text" id="artist" name="artist" />
 <button id="search-artist">Find</button>


 $('#search-artist').click( function() {
     var url = "http://developer.echonest.com/api/v4/playlist/basic?api_key=N6E4NIOVYMTHNDM8J&artist="
                   +  $('#artist').val()
                   + "&results=20&type=artist-radio"
                   + "&format=jsonp&callback=?";
     $.getJSON(url, function(data) {
         // do something with the returned JSON data
     }
 });