JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<div class="container">
<table class="recent-tracks">
<thead>
<tr>
<th>Song</th>
<th>Artist</th>
</tr>
</thead>
</table>
</div>
JavaScript
var clientname = {};
clientname.website = (function(){
var setupLastFM = function(){
var config = {
getRecentTracksURL: "http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=jimmersjukebox&api_key=6db1989bd348bf91797bad802c6645d8&format=json",
user: "jimmersjukebox",
recentTracksElement: $(".recent-tracks")
},
getRecentTracks = $.getJSON(config.getRecentTracksURL, function(data){
var trackData = data.recenttracks.track,
tracks = $.map(trackData, function(track) {
return {
song: track.name,
artist: track.artist['#text']
};
});
config.recentTracksElement.dataTable({
"ajax": config.getRecentTracksURL,
"columns": [{
"data": "name"
}, {
"data": "artist.#text"
}, ]
});
});
};
return{
init: function(){
setupLastFM();
}
};
})();
$(window).load(clientname.website.init);