title: Passing an object's hierarchy as an argument to it's parent function
body: <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>