JSFiddle - React, Tailwind, and code Playground

HTML

<form id="search" action="" method="post">
    <label for="username">Username</label>
    <input name="username" id="username" value="andymantell" placeholder="Enter a last.fm username (e.g. andymantell)" size="60" />
    <input type="submit" name="submit" value="Get events" />
</form>

JavaScript

"use strict";

/**
* Submit event on the search form
*/
$('#search').submit(function(e) {

    e.preventDefault();
    
    var top_artists = lastfm.user.getTopArtists($('#username').val());
    console.log(top_artists);
    
    $.each(top_artists, function(index, item) {
        console.log('here');
    });

});

/**
* Main last.fm object, containing all our API calls
*/
var lastfm = {

    user: {
    
        // Wrapper around user.getTopArtists
        getTopArtists: function(user) {
        
            // Collect up results on an array
            var results = [];
            
            // Fetch top artists for the passed in username
            $.get('http://ws.audioscrobbler.com/2.0/', {method: 'user.getTopArtists', user: user, api_key: 'c2c920e0749f24f2661d54614335748d'}, function(data) {
            
                $('artist', data).each(function(index, artist) {
                
                    // For each artist in the result, build an object containing the artists name and MusicBrainz ID
                    results.push({
                        'name': $('name', artist).text(),
                        'mbid': $('mbid', artist).text()
                    });
                
                });
            
            });
            
            return results;
        
        }
    
    },
    
    artist: {
    
        // Wrapper around artist.getEvents
        getEvents: function(mbid) {
        
        }
    
    }

}