Skip to content

Instantly share code, notes, and snippets.

@michaelbrazell
Last active August 29, 2015 14:19
Show Gist options
  • Save michaelbrazell/ffd5eedbc7271ddd57e3 to your computer and use it in GitHub Desktop.
Save michaelbrazell/ffd5eedbc7271ddd57e3 to your computer and use it in GitHub Desktop.
Pull Screenshots from JSON datasource with a download link
<html>
<head>
<title>Screenshots!</title>
</head>
<body>
<h1>Screenshots!</h1>
<div id="container">
</div>
</body>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if(xhr.status === 200) {
responseObject = JSON.parse(xhr.responseText);
// Build up strings
var newContent='';
for (var i = 0; i < responseObject.length; i++) { // Loop through items
newContent += '<ul class="items">';
newContent += '<li><strong>Game Title:</strong> ' + responseObject[i].titleName + '<br><strong>Download:</strong> <a href="' + responseObject[i].screenshotUris[0].uri.split('?')[0] + '">Download</a> (' + responseObject[i].screenshotUris[0].fileSize + ' kb)<br><img src="' + responseObject[i].screenshotUris[0].uri.split('?')[0] + '" width="300px" height="200px"></li>';
newContent += '</ul>';
}
// Update page
document.getElementById('container').innerHTML = newContent;
}
};
xhr.open('GET', 'data.json', true);
xhr.send(null);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment