Accessing hyphenated json variables within swig templates

Working with swig templates and pre-existing json data (which unfortunately can't be altered) I'm having trouble rendering the data when variables are hyphenated. Found that the situation can be handled by using bracket notation, as clearly stated in the docs, but for some reason, I'm unable to achieve the expected result. I'm aware of other templating languages, but am keen on using swig for performance and other benefits.

Any insight is greatly appreciated.

Test case files:

layout.swigtmpl

<body>
  {% block content %}{% endblock %}
</body>

index.swig

{% extends 'layout.swigtmpl' %}
{% block content %}
  <div>
      <p>{{ targetdiv }}</p> // Works
      <p>{{ ['target-div'] }}</p> // Not rendering
      <p>{{ json['target-div'] }}</p> // Not rendering when assigned to an obj
  </div>
{% endblock %}

index.json

{
  "targetdiv": "lorem ipsum",
  "target-div": "lorem ipsum"
}

In layout file, assigned json data to an object for testing, but no love.

$(function() {
    var json = (function () {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': 'index.json',
            'dataType': "json",
            'success': function(data) {
                json = data;
            }
        });
        console.log("json = " + json['target-div']); // Works fine in log
        return json;
    })();
});

Docs: http://paularmstrong.github.io/swig/docs/#variables

Solution

Instead of passing the contents of index.json as the entire locals object, just place your data on a key one level deeper so that you can use bracket notation...

swig.render('index.swig', { locals: { data: indexjson }});

{{ data['target-div'] }}