Passing an object's hierarchy as an argument to it's parent function
<p>I have an Object called <code>html</code> inside a Function called <code>tpl()</code>.</p>

<pre><code>html = {
    intro: ['intro', 'html'],
    common: { header: ['common', 'header', 'html'] },
    more:{ header: { link: ['hello', 'world'] } }
};
</code></pre>

<p>I am trying to access <code>html</code>'s values by passing it's hierarchy as an argument to <code>tpl()</code>;</p>

<p>I pass a String <code>common.header</code> as an argument, in order to get back the inner-object's content.</p>

<p>[example]:</p>

<pre><code>var a = tpl('common.header'); // correct, returns 'common header html'
</code></pre>

<p>The issue, is when I need to target deeper nested objects:</p>

<pre><code>var b = tpl('more.header.link'); // how can i make this work ?
</code></pre>

<hr>

<p>This is the function I wrote, I am trying however to make it more <em>dynamic</em> (make it possible to work with deeper objects).</p>

<pre><code>var tpl = function( path ){

  if(!path){ return false; }

  var that = this;

  that.html = {
    intro: ['intro', 'html'],
    common: { header: ['common', 'header', 'html'] },
    more: { header: { link: ['hello', 'world'] } }
  };

  path = path.split('.');

  return (!!path[1] ? that.html[path[0]][path[1]] : that.html[path[0]]).join('');

  /*
  // Here is where I am stuck
  for(var i = 0; i &lt; path.length; i++){
    if( path[i][ path[i+1] ] ){}
  }
  */

};
</code></pre>
