gingerrific · August 29, 2015 14:01
diff --git a/html b/html
 <html>
 <head>
 	<title></title>
 </head>
 <body>

 <div class="target"></div> <!-- new, empty div in body of html doc to append our newly fetched data to -->

 <script type="text/template" class="api-request"> <!-- script/template created in your html doc. -->
  
  <div class="repo-name"> <!-- create a skeleton to loosely format some data -->
    <%=name >  <!-- the <%= is crucial. jQuery treats this as a variable, however in our case the name must match the name of the value you are trying to return from the api call -->
  </div>
  
 </script> <!-- close your script tag -->



 </body>
 </html>
diff --git a/jquery b/jquery
 var newTemplate = _.template($('.api-request').text()); //create a new template with name and where you want the info to     // come from. In this case we want all of the text in a selector class "api-request". The HTML template just created. the 
 // .text() call will return the contents of that class. The skeleton with variables in it.


 function repoRendering (data) { //now you create a function to parse the incoming data through your template
    data.forEach(function (repo){  // for each repository in the call run the following
      var repository = newTemplate(repo); // name a variable that's value will be equal to the data requested passed into our template which will then replace the template variable name with the object's value. In this case, we are grabbing the "name:" value from each of the repos and putting it through our template. 
      $('.target').append(repository); //now this will append that information to the created class="target" div in our html
  });
 }


 // the ajax request for the repos page

 $.getJSON('https://api.github.com/users/amler/repos' + authorizationKey).done(function (repos){ //the .done() will wait until the api call is complete before passing it into our function we've created above.
  repoRendering(repos);
 });
	<html>
	<head>
	<title></title>
	</head>
	<body>

	<div class="target"></div> <!-- new, empty div in body of html doc to append our newly fetched data to -->

	<script type="text/template" class="api-request"> <!-- script/template created in your html doc. -->

	<div class="repo-name"> <!-- create a skeleton to loosely format some data -->
	<%=name > <!-- the <%= is crucial. jQuery treats this as a variable, however in our case the name must match the name of the value you are trying to return from the api call -->
	</div>

	</script> <!-- close your script tag -->



	</body>
	</html>
	var newTemplate = _.template($('.api-request').text()); //create a new template with name and where you want the info to // come from. In this case we want all of the text in a selector class "api-request". The HTML template just created. the
	// .text() call will return the contents of that class. The skeleton with variables in it.


	function repoRendering (data) { //now you create a function to parse the incoming data through your template
	data.forEach(function (repo){ // for each repository in the call run the following
	var repository = newTemplate(repo); // name a variable that's value will be equal to the data requested passed into our template which will then replace the template variable name with the object's value. In this case, we are grabbing the "name:" value from each of the repos and putting it through our template.
	$('.target').append(repository); //now this will append that information to the created class="target" div in our html
	});
	}


	// the ajax request for the repos page

	$.getJSON('https://api.github.com/users/amler/repos' + authorizationKey).done(function (repos){ //the .done() will wait until the api call is complete before passing it into our function we've created above.
	repoRendering(repos);
	});