Last active
May 19, 2020 07:57
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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/). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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