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>Playlist name</th>
        <th>Genre</th>
    </thead>
    <tbody id="playlists-body"></tbody>
</table>

JavaScript

$.ajax({
    dataType: "json",
    url: 'http://cdn.filtr.com/2.1/SE/SE/playlists',
    success: function (payload) {
        
        var list = document.getElementById('playlists-body');
        var fragment = document.createDocumentFragment();
        
        payload.forEach(function(playlist){
            
            // Fetch label, image, href and top genre.
            var label = playlist.label;
            var img = playlist.spotifyImageUrl;
            var href = playlist.spotifyUri;
            var genre = _.chain(playlist.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 + '">' + label + '</a></td>' +
                    '<td>' + genre + '</td>';
            
            // Append table row to fragment.
            fragment.appendChild(row);
        
        });
        
        // Append document fragment to DOM.
        list.appendChild(fragment);
        
    }
});