Load data from JSON file into Handlebars / MJML template

Question

I've got an MJML template which compiles to HTML, and am wanting to load variables from a JSON file to the template. I'm new to HTML, JS & Handlebars so could be really off track here.

My MJML template, test.mjml, looks something like:

<mjml>    
<mj-body>
<mj-raw><script type="text/javascript" src="handlebars-v4.7.3.js"></script></mj-raw>  
<mj-raw><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script></mj-raw>
  <mj-section>
    <mj-text><mj-raw>
      <script id="test-template" type="text/x-handlebars-template">
        <div>
        <p>
        Hello my name is {{name}}.
        </p>
        </div>
      </script>      
    </mj-raw></mj-text>
  </mj-column>
</mj-section>

I have a JSON file, data.json:

{
 "name": "John",
 "height": "175cm",
 "occupation": "Teacher",
}

And a JS file, test.js:

$(document).ready(function() {  
    var template = $('#test-template').html();

    var compiledTemplate = Handlebars.compile(template);
    $.getJSON('data.json', function (data) {
        var context = data;
        }
});

var html = compiledTemplate(context);

$(document.body).append(html);

Does anyone know how to do this / what I'm doing wrong?

If I replace jQuery's getJSON method with an inline JSON, it works.