Accessiblity Navigation:

Relational Navigation

Breadcrumb Navigation:

  1. Home
  2. Projects
  3. Objectify
Return to Top

Objectify: JavaScript Object Rendering

This code is the result of quite a bit of frustration with the lack of a feature analagous to PHP's print_r in JavaScript, followed by development of a predecessor to Objective: alert_r. The bugginess and lack of readability in alert_r prompted me to put some more thought into what I really wanted.

Another useful milestone that lead to developing Objectify was reading Douglas Crockford's JavaScript: The Good Parts. By better tapping into JavaScript's inherent bent to Prototypal Object Orientation, Objectify reveals Object relationships. The code below illustrates the the kind of input/output it will process. View the source code for full details. CSS for the output is also available.

The Code In Question.

I am still trying to wrap my brain around the prototypal nature of Javascript. I fully suspect there is some way in which I am misinterpreting it, but as my understanding unwravels I will endeavor to adjust this code to better meld with best practices. The example below is contrived, and probably overly classical.

var Something = function(classification, value)
{
... // inherits from (root) Object
};

var Animal = function(classification, value)
{
... // inherits from Something
};

var Dog = function(classification, value){
... // inherits from Animal
};


document.write(objectify.render(
		{
			anObject : {},
			aString : 'blah',
			anHtmlString : '<html>',
			aNumber : 1,
			anotherNumber : 3.14159,
			aBool : true,
			anArray : ['blah2', 0, null],
			somethingMoreInvolved : {
				a : new Something('class','unknown'),
				b : new Animal('phylum', 'unknown'),
				c : new Dog('name', 'Athena')
			},
			totallyMaxedOut : { p : { q : { r : { s : { t : { u : { v : { w : { x : { } } } } } } } } } }			
		}
));

Return to Top
Return to Top