Skip to content

Instantly share code, notes, and snippets.

@shibe97

shibe97/index.html

Last active April 27, 2022 08:53
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shibe97/9ee81ea45349800a216530badaa01e19 to your computer and use it in GitHub Desktop.
Save shibe97/9ee81ea45349800a216530badaa01e19 to your computer and use it in GitHub Desktop.
Download ZIP
microCMSで取得したデータをテンプレートエンジンを使って表示する
Raw
index.html
<html>
<head>
<title>microCMSで取得したデータをテンプレートエンジンを使って表示する</title>
</head>
<body>
<div id="result" />
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js" type="text/javascript"></script>
<script type="text/x-handlebars-template" id="news-template">
{{#each data}}
<dl class="list">
<dt class="title">{{title}}</dt>
<dd class="timestamp">{{publishedTime}}</dd>
</dl>
{{/each}}
</script>
<script>
window.onload = function() {
$.ajax({
url: 'https://example.microcms.io/api/v1/news',
type: 'GET',
headers: {
'Content-Type': 'application/json',
'X-MICROCMS-API-KEY': 'dc59f358-4622-471f-8d1e-6c7a6f969558'
},
})
.done(function(data) {
var source = $('#news-template').html();
var template = Handlebars.compile(source);
var html = template({
data: data.contents
});
$('#result').html(html);
});
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment