jquery selectors for plain javascript objects instead of DOM elements

Question

I've just started using jquery and I'm really enjoying using selectors. It occurs to me that the idiom would be a very nice way to traverse object trees (e.g., JSON query results). For example, if I have an object like this:

var obj = { 'foo': 1, 'bar': 2,
            'child': { 'baz': [3, 4, 5] }
          };

I would love to be able to write something like $('child baz:last', obj) and get 5. I recognize that chaining wouldn't work, but I'd still love the selection operator. Anyone know if such a beast exists, or what the easiest way would be to write one?

Answer 1

The array object has some methods that you can use:

last = obj.child.baz.slice(-1)[0];

Some other examples:

first = obj.child.baz.slice(0,1)[0];
allExceptFirst = obj.child.baz.slice(1);
allExceptLast = obj.child.baz.(0,-1);

Answer 2

Well, I'd personally say that pure object access looks better than jQuery-like queries. One thing that would be neat would be slicing and other filtering techniques.

If you really wanted to play with object access queries, the following would be some possibilities (think XPath):

var obj = {
    foo: 1,
    bar: 2,
    child: {
        foo: {
            baz: [3, {a: 1}, {a: 2, b: 3}]},
        bar: {
            baz: [42, {a: 123}, {a: -1}]},
        baz: null}};

// Implicitly start in the Global object, unless a context is provided.
// Keys in JavaScript objects are essentially stored in order (not valid for
// *all* flavors, but it's close to standard. So you could do slicing on keys.)

// Selects (does not return them)
// obj.child.foo.baz[1].a
// obj.child.foo.baz[2].a
// obj.child.bar.baz[1].a
// obj.child.bar.baz[2].a
// Then performs an aggregate that returns value 125.
$('obj.child[:2].baz[1:].a').sum()

// Selects obj.foo, obj.bar, obj.child.foo.baz[0] and obj.child.bar.baz[0]
$('obj *[typeof(number)]')

// Selects obj.foo and obj.child.foo
$('obj foo')

// Other possible methods: delete(), set(), get() (as an array of values),
// min(), max(), avg(), merge() etc etc.

In the end though, I don't see how this is very useful. But eh, it's an idea I guess =)

Answer 3

Here's a proof-of-concept implementation for getting jQuery itself work on objects. Through an object wrapper (FakeNode), you can trick jQuery into using its built-in selector engine (Sizzle) on plain JavaScript objects:

function FakeNode(obj, name, parent) {
    this.obj = obj;
    this.nodeName = name;
    this.nodeType = name ? 1 : 9; // element or document
    this.parentNode = parent;
}

FakeNode.prototype = {
    documentElement: { nodeName: "fake" },

    getElementsByTagName: function (tagName) {
        var nodes = [];

        for (var p in this.obj) {
            var node = new FakeNode(this.obj[p], p, this);

            if (p === tagName) {
                nodes.push(node);
            }

            Array.prototype.push.apply(nodes,
                node.getElementsByTagName(tagName));
        }

        return nodes;
    }
};

function $$(sel, context) {
    return $(sel, new FakeNode(context));
}

And the usage would be:

var obj = {
    foo: 1,
    bar: 2,
    child: {
        baz: [ 3, 4, 5 ],
        bar: {
            bar: 3
        }
    }
};

function test(selector) {
    document.write("Selector: " + selector + "<br>");

    $$(selector, obj).each(function () {
        document.write("- Found: " + this.obj + "<br>");
    });
}

test("child baz");
test("bar");

Giving the output:

Selector: child baz
- Found: 3,4,5
Selector: bar
- Found: 2
- Found: [object Object]
- Found: 3

Of course, you'd have to implement a lot more than the above to support more complex selectors.

BTW, have you seen jLinq?