Create and Retrieve Nested Objects with jQuery

By  on  

The ability to create and retrieve nested objects by objectified string path is incredibly useful.  Not only do you not need to do the manual string of object/property checks to avoid "{x} is not defined" errors, but if you create your method properly, you can also set an empty object in its given place (or namespace, some would call it.    Here's how you can add this functionality to the jQuery object.

The jQuery JavaScript

Since jQuery's philosophy is to use the same method for getting and setting, we'll be doing this same for creating and retrieving objects;  in this case, we'll use the obj method:

(function() {

	// Utility method to get and set objects that may or may not exist
	var objectifier = function(splits, create, context) {
		var result = context || window;
		for(var i = 0, s; result && (s = splits[i]); i++) {
			result = (s in result ? result[s] : (create ? result[s] = {} : undefined));
		}
		return result;
	};

	// Gets or sets an object
	jQuery.obj = function(name, value, create, context) {
		// Setter
		if(value != undefined) {
			var splits = name.split("."), s = splits.pop(), result = objectifier(splits, true, context);
			return result && s ? (result[s] = value) : undefined;
		}
		// Getter
		else {
			return objectifier(name.split("."), create, context);
		}
	};

})();

As with the MooTools alternative, the objectifier function is enough to handle both getting and setting, as well as doing both within a given context (existing object).  Here are a few examples of how you can use the new jQuery.obj method:

// Check for existence
var moduleNameExists = jQuery.obj("mynamespace.widget.moduleName"); // undefined

// Create the obj
jQuery.obj("mynamespace.widget.moduleName", { prop: 1 }); // mynamespace.widget.moduleName.prop returns 1

// Create an object on existing object
jQuery.obj("subnamespace.subModuleName", { someProp: 8 }, true, mynamespace.widget);
	// mynamespace.widget.subnamespace.subModuleName = { someProp: 8 }

As I work more with jQuery, both with its provided methods and other third party tools, accessing arbitrary objects by string and sometimes context allows me to avoid the dance of manual object and property existence checks.  Of course the essence of this script is really the objectifier method, which can be added to any framework or toolkit, but with a framework as popular as jQuery, why not just put it out there for everyone?

Recent Features

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    MooTools Font-Size Scroller with Cookie Save

    Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why...

  • By
    Implement jQuery’s hover() Method in MooTools

    jQuery offers a quick event shortcut method called hover that accepts two functions that represent mouseover and mouseout actions. Here's how to implement that for MooTools Elements. The MooTools JavaScript We implement hover() which accepts to functions; one will be called on mouseenter and the other...

Discussion

  1. Any chance that there is a demo or functional example of this available? I’m trying to use this to create nested dropdown boxes based on jQuery UI’s nested menu, and I’m having some difficulty understanding how to apply the objectifier function.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!