CODEWITHSUNDEEP
jqueryajaxjsonlast.fm
Besto
Besto

Reputation: 309

Track search Last.fm JSON API with jQuery AJAX

I'm trying to re-invent Last.FM's track search but on my site and using jQuery and AJAX. So my idea is to source the data via Last.FM's JSON API and pass the text input element data. For example - the user would put in "Rolling Stones Horses" and click submit. jQuery would pass "Rolling Stones Horses" into the string http://ws.audioscrobbler.com/2.0/?method=track.search&track=Rolling%20Stones%20Horses&api_key=b25b959554ed76058ac220b7b2e0a026&format=json&callback=? Then it would spit out the results into HTML as 

<P> ARTIST NAME - TRACK </P>

I'm trying to piece together how a Search Form, AJAX and getJSON work together. Here's what I have so far:

<body>
   <form action="/wphmusic/" id="searchForm">
   <input type="text" name="s" placeholder="Search..." />
   <input type="submit" value="Search" />
   </form>

   <div id="result"></div>

<script type="text/javascript">

$("#searchForm").submit(function(event) {

event.preventDefault(); 

var $form = $( this ),
    term = $form.find( 'input[name="s"]' ).val(),
    url = $form.attr( 'action' );
});

var fmurl = 'http://ws.audioscrobbler.com/2.0/?method=track.search&track=' + url + '&api_key=b25b959554ed76058ac220b7b2e0a026&format=json&callback=?';
$.getJSON(fmurl, function(data) {
    var html = '';
    $.each(data.results.trackmatches.track, function(i, item) {
        html += "<p>" + item.name + " - " + item.artist + "</p>";
});
    $('#result').append(html);

</script>
</body>

Super newb here!

Upvotes: 1

Views: 1334

Answers (1)

Zach
Zach

Reputation: 1243

That should work, although it looks to me like you are missing a bracket in your getJSON call.

Upvotes: 1

Related Questions