Handlebar.js How to load a specific part of template based on variable in JS file

Question

I am currently learning Javascript and Handlebar.JS through the javascriptissexy course and I am currently building a Dynamic Quiz. All the features work but I can't get to get the handlebar.js section to work.

My main problem is how to load only a specific part of my Handlebars template/Json File, namely only the quiz question and answers that are currently active. In Javascript I select it as follow

    $.getJSON('data'+quiz+'.json', function(data) {

    if (answernumber[quiz] < data.quiz.length) {
        //Create the question and answers for the Quiz the user is in in which the answernumber is the current question and the quiz is the current quiz (User can do several quizzes through the twitter bootstrap taps functionality

        $('.question').text(data.quiz[answernumber[quiz]].question).hide().fadeIn("slow");

        }

So through this javascript I get just the quiz question which are loaded from my JSON files which lookes like this

     {"quiz":[
{
    "question":"Which pop duo was the first western band to play in The Peoples Republic of China??",
    "correctanswer":"a.Wham",
    "answers": [
        { "answer":["a.Wham"]},
        { "answer":["Simon and Garfunkel"]},
        { "answer":["Right Said Fred"]}

    ]
},
{
    "question":"Speed skating originated in which country?",
    "correctanswer":"a.Netherlands",
    "answers": [
        { "answer":["Russia"]},
        { "answer":["a.Netherlands"]},
        { "answer":["Canada"]},
        { "answer":["Norway"]}
    ]
},

]}

I currently load the question in the html through

    <div id="result">test</div>

    <script id="some-template" type="text/x-handlebars-template">
<table>
    <thead>
    <th>Name</th>
    </thead>
    <tbody>
    {{#each quiz}}
    <tr>
        <td>question: {{question}}

    </tr>

    {{/each}}
    </tbody>
</table>

and the handlebars in the js like this

var source = $("#some-template").html();
var template = Handlebars.compile(source);


var data = $.getJSON("test.json", function (data) {


    alert('Load was performed.');
   // alert (data.quiz[0].val());
    var test = ("test2");

    for (var i = 0; i<4; i++) {

        //alert(data.quiz[answernumber[quiz]].answers[i].answer);
    }
    //data = data.quiz;
    $("#result").html(template(data));
});

I realise that the code is probably pretty obscure and would really appreciate the help. How do I select just the current quiz question from the handlebars template (which is currently based on a variable in my js file). Not sure if I should partially load my Json file or just partially display the template and how i could do either.

Much appreciated

Answer 1

You're missing the closing tag in your template.

To select an individual JSON object, in your $("#result").html(template(data)); call you'll need to specify which object in your JSON file that you want.

The "data" is the JSON file you're receiving; you can can select child objects. So, to access the first question you would use:

$("#result").html(template(data.quiz[0]));

And the second question would be $("#result").html(template(data.quiz[1])); and so forth. If you want to grab a specific value out (this won't matter for handlebars templating but is good to know for future reference), you can access specifics using dot notation:

$("#result").html(template(data.quiz.question)); => "Which pop duo was the first western band to play in The Peoples Republic of China??"

And to find a specific answer, you could:

$("#result").html(template(data.quiz[1].answers[2])); => "Canada"

I'd recommend getting familiar with traversing JSON objects (and Javascriptissexy.com has a post regarding JSON Objects here: http://javascriptissexy.com/javascript-objects-in-detail/ )