javascript - Alternatives to eval() for multiple nested objects

Question

I'm trying to create a generic i18n solution for a HTML app I'm working in. I'm looking for alternatives to use eval() to call deeply nested Javascript objects:

Suppose the following HTML example:

<div id="page1">
  <h1 data-i18n="html.pageOne.pageTitle"></h1>
</div>

and it's companion Javascript (using jQuery):

var i18n;

i18n = {
  html: {
     pageOne: {
       pageTitle: 'Lorem Ipsum!'
     }
  }
};

$(document).ready(function () {
  $('[data-18n]').each(function () {
    var q;

    q = eval('i18n.' + $(this).attr('data-i18n'));
    if (q) {
      $(this).text(q);
    }
  });
});

Any advices on how to access the "pageTitle" property inside the i18n object without using eval()? I need to keep the object's structure, so changing its layout to a "flat" solution is not feasible.

Thanks!!!

Answer 1

You can use bracket syntax, as others have hinted at. But, you'll need to split and iterate at .:

function lookup(obj, path) {
    var keys = path.split('.'),
        result = obj;

    for (var i = 0, l = keys.length; i < l; i++) {
        result = result[keys[i]];

        // exit early if `null` or `undefined`
        if (result == null)
            return result;
    }

    return result;
}

Then:

q = lookup(i18n, $(this).attr('data-i18n'));
if (q) {
  $(this).text(q);
}