ObjectBrowser

docs

There are times where I want to explore an object in something other than firebug. I know, it's rare, but you know, it happens.

ObjectBrowser does that for you. It lets you build an object tree on the fly, only adding child elements to the DOM when the user expands them. This is especially useful if you're representing something with circular references. For example, if you were to show an object tree of an element, you could explore the element>parent>children and end up back at the element. It's infinite.

The basics of ObjectBrowser are that you hand it a javascript object of any time and it draws the tree for you. Because the drawing happens on demand, you can even load this information via ajax or whatever, further lightening the load of what you need to make the page ready for interaction.

Here's a simple object browser:

//this is just some dummy data, an object to explore
var data = {
  fruits: {
    apples: ['red','yellow','green','fuji','granny smith'],
    grapes: [
      {
        fun: 'green',
        notFun: 'purple'
      },
      {
        wine: ['merlot', 'caberney'],
        jelly: 'concord'
      }
    ]
  },
  veggies: {
    apples: ['test'],
    summer: {
      tomatoes: ['big','small'],
      melons: ['watermelon','canteloupe']
    },
    winter: ['potatoes', 'carots'],
    someFunction: function(someVariable){
      alert(someVariable);
    }
  }
};
new ObjectBrowser($('objBrowser1'), {
  data: data
});

There are events fired for branch clicks and leaf clicks (branches have child nodes, leafs don't) and you can extend the class to add in ajax hits to get more data on either.

Here's a more expansive example using a javascript class:

new ObjectBrowser($('objBrowser2'), {
  data: $('fxTarget').get('tween')
});

And here's an example using a DOM element:

new ObjectBrowser($('objBrowser3'), {
  data: $('fxTarget')
});