mogi/test.html

## test.html
<!DOCTYPE html>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery', 1);</script>
<script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>

<script>
$(function() {
  function callAPI (method, url, async){
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, async);
    xhr.send();

    console.log(xhr.status);
    console.log(JSON.parse(xhr.responseText));
    return JSON.parse(xhr.responseText)
  }

  var api_url = 'http://api.openweathermap.org/data/2.5/forecast/daily/?units=metric&q=Tokyo,jp&cnt=7'
  var data = callAPI('GET', api_url, false)

  var tmpl = Hogan.compile($('#weathers_tmpl').text());
  $('#weathers_hook').append(tmpl.render({
    weathers: [{name: data.list[0].clouds}, {name: data.list[0].deg}, {name: data.list[0].dt}]
  }));
});
</script>
</head>

<body>
<div id="weathers_hook">
  <script type="text/template" id="weathers_tmpl">
  <ul> {{#weathers}} <li>{{name}}</li> {{/weathers}} </ul>
  </script>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://www.google.com/jsapi"></script>
	<script>google.load('jquery', 1);</script>
	<script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>

	<script>
	$(function() {
	function callAPI (method, url, async){
	var xhr = new XMLHttpRequest();
	xhr.open(method, url, async);
	xhr.send();

	console.log(xhr.status);
	console.log(JSON.parse(xhr.responseText));
	return JSON.parse(xhr.responseText)
	}

	var api_url = 'http://api.openweathermap.org/data/2.5/forecast/daily/?units=metric&q=Tokyo,jp&cnt=7'
	var data = callAPI('GET', api_url, false)

	var tmpl = Hogan.compile($('#weathers_tmpl').text());
	$('#weathers_hook').append(tmpl.render({
	weathers: [{name: data.list[0].clouds}, {name: data.list[0].deg}, {name: data.list[0].dt}]
	}));
	});
	</script>
	</head>

	<body>
	<div id="weathers_hook">
	<script type="text/template" id="weathers_tmpl">
	<ul> {{#weathers}} <li>{{name}}</li> {{/weathers}} </ul>
	</script>
	</div>
	</body>
	</html>