Skip to content

Instantly share code, notes, and snippets.

@Sisekelo
Created July 29, 2018 16:20
Show Gist options
  • Select an option

  • Save Sisekelo/9da2cc02f34be416ab01b5c66a12212a to your computer and use it in GitHub Desktop.

Select an option

Save Sisekelo/9da2cc02f34be416ab01b5c66a12212a to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>University List Swaziland</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="handlebars-v4.0.11.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/svg" href="img/icon.png" />
<style>
</style>
</head>
<body>
<nav>
<ul class="topnav">
<li><a href="#countries">Countries</a></li>
<li><a class="active" href="index.html#home">Home</a></li>
</ul>
</nav>
<div>
<script id="basic-template" type="text/x-handlebars-template">
<table id="schools">
<tr>
<th class="countryList">Country</th>
<th>University Name</th>
<th>Link</th>
</tr>
{{#each objects}}
<tr>
<td class="countryList">{{country}}</td>
<td>{{name}}</td>
<td><a href="{{web_pages}}">{{web_pages}}</a></td>
</tr>
{{/each}}
</script>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
var req = $.ajax({
url: "https://cors-anywhere.herokuapp.com/http://universities.hipolabs.com/search?country=ghana",
type:"get",
dataType: "json"
});
req.done(function(data) {
console.log(data);
var source = $("#basic-template").html();
var template = Handlebars.compile(source);
var data = data;
var wrapper = {objects: data};
console.log(template(wrapper));
$('body').append(template(wrapper));
});
});
</script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment