Treehouse Badges

Simple JSON and YQL script to pull in badges from Team Treehouse

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<div id="title"><h3>Badges Earned on TreeHouse</h3></div>
<div id="holder">
    <ul id="badges"></ul>
</div>

CSS

#title{
    text-align: center;
}
ul#badges li {
    width: 50px;
    display: inline-block;
    margin: 10px;
}

JavaScript

$(document).ready(function() {
    // Setup our query ( username is the identifier for your treehouse profile page i.e. http://teamtreehouse.com/psyne )
    var username = 'psyne', 
    yql = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fteamtreehouse.com%2F' + username + '%22&format=json&diagnostics=false&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?', 
    badges = $('#badges');

    // Pull in the elements from YQL using jQuery
    $.getJSON(yql, function(results) {

        // This part can be a bit tricky if you are just learning JSON my suggestion is to use a viewer such as http://jsonviewer.stack.hu/   
        var resultArr = results.query.results.body.div[1].div.div[0].div[1].div.ul.li;

        $.each(resultArr, function(i, val) {
            badges.append('<li><img src="' + val.img.src + '" alt="' + val.img.alt + '"/></li>');
        });
    });
});