get_account.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<div class="container">
    <div><h1>My First App</h1></div>
    <div id="user_area"></div>
</div>

<script>
steem.api.setWebSocket('wss://steemd-int.steemit.com');

var user_info = null;
function get_user(user_id, callback) {
    console.log('Send getAccounts request');
    steem.api.getAccounts([user_id], function(err, response){
        if (err) {
            console.log('Error!');
        } else {
            console.log('Done!');
            user_info = JSON.parse(response[0].json_metadata).profile;
            user_info.id = user_id;
            if (callback) {
                callback();
            }
        }
    });
}

function show_as_text() {
    if (user_info) {
        var info = JSON.stringify(user_info);
        $('#user_area').append(info);
    }
}

function show_nicely() {
    if (user_info) {
        var user_html = $('<div/>').append(
            $('<img/>', {src: user_info.profile_image, class: 'img-circle', width:120})
        ).append(
            $('<h2/>').text(user_info.id + ' - ' + user_info.name)
        ).append(
            $('<h5/>').text(user_info.location)
        ).append(
            $('<h5>').text(user_info.about)
        );
        $('#user_area').append(user_html);
    }
}


</script>