Skip to content

Instantly share code, notes, and snippets.

@sloanlance
Last active May 19, 2020 07:57
Show Gist options
  • Save sloanlance/a69c6cd2c8193eb36f17320409d74a6e to your computer and use it in GitHub Desktop.
Save sloanlance/a69c6cd2c8193eb36f17320409d74a6e to your computer and use it in GitHub Desktop.
DefiantJS example of using XSLT to transform JSON to HTML. Run it: https://cdn.rawgit.com/sloanlance/a69c6cd2c8193eb36f17320409d74a6e/raw/DefiantJS_JSON_XSLT_example.html
Gist title: XSLT for JSON
Summary: In response to a Stack Overflow question about an XSLT equivalent for processing JSON,
I posted an answer (http://stackoverflow.com/a/34910682/543738) suggesting DefiantJS. Also, a
JSFiddle version (https://jsfiddle.net/lsloan/8dt9egjf/).
<html>
<head>
<title>DefiantJS: Example of XSLT transforming JSON to HTML</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/defiant.js/1.4.0/defiant.min.js"></script>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
var
data = {
"movie": [{
"title": "The Usual Suspects"
}, {
"title": "Pulp Fiction"
}, {
"title": "Independence Day"
}]
},
html = Defiant.render('books_template', data);
$('#output').append(html);
}//]]>
</script>
</head>
<body>
<!-- Defiant template -->
<script type="defiant/xsl-template">
<xsl:template name="books_template">
<ul>
<xsl:for-each select="//movie">
<li>
<xsl:value-of select="title" />
</li>
</xsl:for-each>
</ul>
</xsl:template>
</script>
<div id="output"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment