JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<div class="demo">
     <h2>Artist Suggestion Demo </h2>

    <div class="ui-widget">
        <label for="artist">Enter an artist:</label>
        <input id="artist" />
    </div>
    <div class="ui-widget">Result:
        <div id="log" class="ui-widget-content"></div>
        <div id="log2"></div>
    </div>
</div>

CSS

body {
        margin:20px;
        font-family: Ariel
    }
    .ui-autocomplete-loading {
        background: white url('ui-anim_basic_16x16.gif') right center no-repeat;
    }
    .ui-widget {
        margin-top:20px
    }
    #artist {
        width: 20em;
    }
    #log {
        height: 24px;
        width: 532px;
    }
#log2{ height:50px; width:532px; border:1px solid black;}

JavaScript

$(function () {
    $("#artist").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "http://developer.echonest.com/api/v4/artist/suggest",
                dataType: "jsonp",
                async: false,
                data: {
                    results: 12,
                    api_key: "LC1R0KW4UXO5PBX8C",
                    format: "jsonp",
                    name: request.term
                },
                success: function (data) {
                    response($.map(data.response.artists, function (item) {
                        return {
                            label: item.name,
                            value: item.name,
                            id: item.id
                        };
                    }));
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            $("#log").empty();
            $("#log").append(ui.item ? ui.item.id + ' ' + ui.item.label : '(nothing)');
            getGen(ui.item.id);
        }
    });
});

function getGen(aId) {
    $.ajax({
        url: "http://developer.echonest.com/api/v4/artist/profile",
        dataType: "jsonp",
        async: false,
        //jsonpCallback: "localJsonpCallback11",
        data: {                     
            api_key: "LC1R0KW4UXO5PBX8C",
            format: "jsonp",
            id: ""+aId+"",
            bucket: 'genre'
        },
        success: function (result) {
            var myObj = $.parseJSON(JSON.stringify(result));
            var gen = myObj.response.artist.genres;
            //alert(myObj.response.status.code);
            //alert('z');
            for(var i=0; i<gen.length; i++)
                alert(gen[i].name);
            var i = 0;
            //return i;
            //alert(myObj.response.status.code);
            //alert(myObj.response.artist.genres.name);
//            alert(myObj.response);
            //for (i = 0; i <...