JSFiddle - React, Tailwind, and code Playground

by namuol

HTML

<form>
    <input type='text' name='artist' placeholder='Artist' />
    <input type='text' name='album' placeholder='Release' />
    <button type='submit'>Search</button>
</form>

<section>
    <legend>RESULTS:</legend>
    <ul id='data'></ul>
</section>

JavaScript

var base_url = 'http://api.discogs.com/database/search';

$('form').on('submit', function(e) {
    e.preventDefault();

    $.getJSON(base_url + '?callback=?', {
        type: 'master',
        artist: $('form input[name=artist]').val(),
        title: $('form input[name=album]').val()
    }, function (res, status, xhr) {
        console.log(xhr);
        console.log(res);
        
        var i, master;
        if (res.meta.status != 200) {
            alert("Unexpected Error: " + status);
            return;
        }
        
        $('#data').html('');
        
        for(i=0;i<res.data.results.length;++i) {
            master = res.data.results[i];
            $('#data').append($('<li><img src="'+master.thumb+'" /><a href="'+master.resource_url+'">('+(master.year||'????')+') '+master.title+'</a></li>'));
        }
    });
    
    return false;
});

$('#data > li > a').live('click', function (e) {
    var url = $(this).attr('href'),
        li = $(this).parent();
    $.getJSON(url + '?callback=?', function (res, status, xhr) {
        console.log(res.data);
    });
    return false;
});