POC: JSON display, recursive render with jQuery Template action (attempt 2)
I couldn't get the stripped-down recursive jQuery Templates to work without a stack overflow, so this will have to do.
by Adam Patridge
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<ul class="results"></ul>
<script id="displayItemTemplate" type="text/x-jquery-tmpl">
<li class="type-${propertyType}">
<span class="propertyName">${propertyName}</span>:
<span class="displayValue">${displayValue}</span>
<ul class="nextDestination">
</ul>
</li>
</script>
CSS
ul { list-style-type: circle; margin-left: 15px; }
li li { margin-left: 5px; }
.type-string .displayValue { color: #A31515; }
.type-null .displayValue,
.type-number .displayValue { color: #281; }
JavaScript
$(function() {
var data = {
"data": {
"property1": "property1value",
"property2": null,
"property3": 3,
"property4": [
{
"property401": "4.0.property1value",
"property402": null,
"property403": 403,
},
{
"property411": "4.3.property1value",
"property412": null,
"property413": 433,
}
],
"property5": {
"property51": "5.property1value",
"property52": 52
},
"function1": function() {
return 3;
}
}
};
var renderSubItems = function(itemToAnalyze, destinationElement) {
var propertyName, propertyType, propertyValue, displayValue, valueRequiresDigging;
for (propertyName in itemToAnalyze) {
if (itemToAnalyze.hasOwnProperty(propertyName)) {
propertyValue = itemToAnalyze[propertyName];
propertyType = typeof(propertyValue);
displayValue = null;
valueRequiresDigging = ("object" === propertyType && null !== propertyValue);
if (!valueRequiresDigging) {
displayValue = propertyValue;
if (null === displayValue) {
propertyType = "null";
displayValue = propertyType;
}
else if ("string" === propertyType) {
displayValue = "\"" + displayValue + "\"";
}
}
else {
if (propertyValue instanceof Array) {
propertyType = "array";
}
}
$("#displayItemTemplate").tmpl({
propertyName: propertyName,
propertyType:...