JSFiddle - React, Tailwind, and code Playground

by janjarfalk

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<table class="table table-striped">
    <thead>
        <th></th>
        <th>Release name</th>
        <th>Genre</th>
    </thead>
    <tbody id="releases-body"></tbody>
</table>

JavaScript

$.ajax({
    dataType: "json",
    url: 'http://cdn.filtr.com/2.1/SE/SE/releases',
    success: function (payload) {
        
        var list = document.getElementById('releases-body');
        var fragment = document.createDocumentFragment();
        
        payload.forEach(function(release){
            
            // Fetch artist, name, image, href and top genre.
            var artist = release.artist;
            var name = release.label;
            var img = release.spotifyImageUrl;
            var href = release.spotifyUri;
            var genre = _.chain(release.tags)
                .sortBy(function(tag){
                    return -tag.match
                })
                .first(1)
                .pluck('label')
                .value()
                .join('');
            
            // Create table row.
            var row = document.createElement('tr');
                row.innerHTML = 
                    '<td width="38">' +
                        '<img class="img-responsive" src="' + img +  '" />' +
                    '</td>' +
                    '<td><a href="' + href + '">' + artist + ' - ' + name + '</a></td>' +
                    '<td>' + genre + '</td>';
            
            // Append table row to fragment.
            fragment.appendChild(row);
        
        });
        
        // Append document fragment to DOM.
        list.appendChild(fragment);
        
    }
});