Question

I have an Object called html inside a Function called tpl().

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

I am trying to access html‘s values by passing it’s hierarchy as an argument to tpl();

I pass a String common.header as an argument, in order to get back the inner-object’s content.

[example]:

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

The issue, is when I need to target deeper nested objects:

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

---

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

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 < path.length; i++){
    if( path[i][ path[i+1] ] ){}
  }
  */

};

Answer 1

If I understand your question correctly, how about keeping a pointer to the current substructure? Like this:

for(var tmp = that.html, i = 0; i < path.length; i++){
    tmp = tmp[path[i]];
    if (!tmp) return false;
}
return tmp;