index.html

<html>
<script type="text/javascript" src="./js/jquery-1.7.js"></script>
<style>
#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 600px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
</style>

<script>


  $.get("https://api.quizlet.com/2.0/users/ctyonahl/sets", { client_id: "e72PsWbtX8" }, function(data){
  $("#navcontainer").html( makeSetList(data) ) ;
  });
  
  function makeSetList( sets ) {
  	
    var htmlString = '';
  
    htmlString='<ul id="navlist">'
    for(var i=0; i<sets.length; i++){
      htmlString=htmlString+'<li><a href="#">'+sets[i].title+' ('+sets[i].terms.length+ ' terms)</a></li>'
      }
  htmlString=htmlString+'</ul>'  
  return htmlString; 
}

</script>  
<body>
	<div id="navcontainer"></div>
</body>
</html>