mootools

References to Documentation

1. Native/Element.js#$
2. Native/Array.js#Array.each
3. Native/Element.js#Element.initialize
4. Native/Element.js#Element.setHTML
5. Native/Element.js#Element.injectBefore
6. Native/Element.js#Element.addClass
7. Element/Element-Event.js#Event
8. Remote/Json-Remote.js#Json.Remote
9. Native/Element.js#Element.empty

var addImages = function(images) {
	var gallery = $('gallery');
	images.each(function(image) {
		var el = new Element('div', {'class': 'preview'});
		var name = new Element('h3').setHTML(image.name).injectInside(el);
		var desc = new Element('span').setHTML(image.description).injectAfter(name);
		var img = new Element('img', {'src': 'demos/Json.Remote/' + image.src}).injectAfter(desc);
		var footer = new Element('span').injectAfter(img);
		if (image.views > 50 && image.views < 250) footer.setHTML('popular').addClass('popular');
		else if (image.views > 250) footer.setHTML('SUPERpopular').addClass('SUPERpopular');
		else footer.setHTML('normal').addClass('normal');
		el.inject(gallery);
	});
}
 
$('loadJson').addEvent('click', function(e) {
	e = new Event(e).stop();
	var url = 'http://demos.mootools.net/demos/Json.Remote/data.js';
	var request = new Json.Remote(url, {
		onComplete: function(jsonObj) {
			addImages(jsonObj.previews);
		}
	}).send();
});
 
$('clearJson').addEvent('click', function(e) {
	e = new Event(e).stop();
	$('gallery').empty();
});

<h3>Json.Remote</h3>
<p><a href="#" title="Start loading data!" id="loadJson">load Data!</a> | <a href="#" id="clearJson" title="Clear data!">clear Data!</a> | <a href="http://demos.mootools.net/demos/Json.Remote/data.js" title="Json: data.js">see <strong>data.js</strong></a> | <a href="http://demos.mootools.net/demos/Json.Remote/data_hr.js" title="Json: data.js (human readable)">see <strong>data.js</strong> (human readable)</a></p>
<br />
 
<div id="gallery"></div>

.preview {
	float: left;
	width: 180px;
	height: 180px;
	margin: 4px;
	padding: 5px;
	text-align: center;
	background-color: #F9F9F9;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
 
.preview span { 
	display: block;
	font-size: 11px; 
	margin-bottom: 4px;
}
 
.popular {
	color: #2e8531;
	font-weight: bold;
}
 
.SUPERpopular {
	font-weight: bold;
	color: #d62222;
}
 
.normal {
	font-weight: bold;
}