title: Integrating a JSON file into html with Mustache
body: <p>I think im fairly close, I have looked at a fair few examples of integrating an external JSON file into html with mustache, but at the moment it isnt working. The JSON file is full of trivia questions, here is a sample question that I am trying to link:</p>
  
  <pre><code>{
    "jsonquestions": [
      {
        "id":1,
        "q_category_id":0,
        "q_text":"Which of the following is regar-ded as the real founder of portugese power in India",
        "q_options_1":"Pedro Cabral",
        "q_options_2":"Almeida",
        "q_options_3":"Vasco da Gama",
        "q_options_4":"Alfonso de Albuquerque",
        "q_correct_option":4,
        "q_difficulty_level":2,
        "q_date_added":"2013-06-10T04:00:00.000Z"
      }
    ]
  }
  </code></pre>
  
  <p>The file is named questions.json, I am trying to link it into this html table:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html class="no-js" lang=""&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="index.css"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta content="ie=edge" http-equiv="x-ua-compatible"&gt;
  
      &lt;title&gt;Quiz&lt;/title&gt;
      &lt;meta content="" name="description"&gt;
      &lt;meta content="width=device-width, initial-scale=1" name="viewport"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;hr&gt;
  
      &lt;div id="control"&gt;
      &lt;h1&gt;Questions&lt;/h1&gt;Data generated from &lt;a href=
      "https://market.mashape.com/pareshchouhan/trivia"&gt;
      https://market.mashape.com/pareshchouhan/trivia&lt;/a&gt;
      &lt;br&gt;&lt;br&gt;
  
          Search questions:
          &lt;input type="text" id="searchText"&gt;
          &lt;button id="search"&gt;Search Questions&lt;/button&gt;
          &lt;select id="sortquestions"&gt;
              &lt;option id="idascend"&gt;Ascending ID&lt;/option&gt;
              &lt;option id="iddescend"&gt;Descending ID&lt;/option&gt;
              &lt;option id="alphabetascend"&gt;Ascending Alphabetical&lt;/option&gt;
              &lt;option id="alphabetdescend"&gt;Descending Alphabetical&lt;/option&gt;
              &lt;option id="diffascend"&gt;Ascending Difficulty&lt;/option&gt;
              &lt;option id="diffdescend"&gt;Descending Difficulty&lt;/option&gt;
          &lt;/select&gt;
          &lt;button id ="sort"&gt;Sort&lt;/button&gt;
      &lt;br&gt;&lt;br&gt;
  
          Filter by difficulty:
          &lt;input type="radio" name="difficulty" id="1" value="1" checked&gt; 1
          &lt;input type="radio" name="difficulty" id="2" value="2"&gt; 2
          &lt;button id="difficultybutton"&gt;Filter&lt;/button&gt;
          &lt;button id="random"&gt;Randomise&lt;/button&gt;
          &lt;button id="quiz"&gt;Begin Quiz!&lt;/button&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;/div&gt;  
  
      &lt;table id="anchor"&gt;&lt;/ul&gt;
  
      &lt;script id="questions-template" type="text/template"&gt;  
      {{#jsonquestions}}
      &lt;table id="questions"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt;
  
                  &lt;th&gt;Question&lt;/th&gt;
  
                  &lt;th&gt;Answer 1&lt;/th&gt;
  
                  &lt;th&gt;Answer 2&lt;/th&gt;
  
                  &lt;th&gt;Answer 3&lt;/th&gt;
  
                  &lt;th&gt;Answer 4&lt;/th&gt;
  
                  &lt;th&gt;Correct Answer&lt;/th&gt;
  
                  &lt;th&gt;Difficulty&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;{{id}}&lt;/td&gt;
  
                  &lt;td&gt;{{q_text}}&lt;/td&gt;
  
                  &lt;td&gt;{{q_options_1}}&lt;/td&gt;
  
                  &lt;td&gt;{{q_options_2}}&lt;/td&gt;
  
                  &lt;td&gt;{{q_options_3}}&lt;/td&gt;
  
                  &lt;td&gt;{{q_options_4}}&lt;/td&gt;
  
                  &lt;td&gt;{{q_correct_option}}&lt;/td&gt;
  
                  &lt;td&gt;{{q_difficulty_level}}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      {{/jsonquestions}}
      &lt;/script&gt;
  
      &lt;script&gt; 
      $(function() {
          $.getJSON('js/questions.json', function(data) {
              var template = $('#jsonquestions-template').html();
              var info = Mustache.to_html(template, data);
              $('#anchor').html(info);
          });
      });
      &lt;/script&gt;
  
      &lt;/br&gt;&lt;/br&gt;
      &lt;div id="answers" style="display:none";&gt;
          &lt;input type="radio" name="answer" value="1" id="answer1" checked&gt;&lt;label id="answerlabel1"&gt;&lt;/label&gt;&lt;/br&gt;
          &lt;input type="radio" name="answer" value="2" id="answer2"&gt;&lt;label id="answerlabel2"&gt;&lt;/label&gt;&lt;/br&gt;
          &lt;input type="radio" name="answer" value="3" id="answer3"&gt;&lt;label id="answerlabel3"&gt;&lt;/label&gt;&lt;/br&gt;
          &lt;input type="radio" name="answer" value="4" id="answer4"&gt;&lt;label id="answerlabel4"&gt;&lt;/label&gt;&lt;/br&gt;
          &lt;/br&gt;
          &lt;button id="giveanswer"&gt;Answer&lt;/button&gt;
          &lt;/br&gt;&lt;/br&gt;
          &lt;label id="answerresult"&gt;&lt;/label&gt;
          &lt;/br&gt;&lt;/br&gt;
          &lt;label id="score"&gt;&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt; 
      &lt;script src="js/mustache.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/trivia.js"&gt;&lt;/script&gt;
      &lt;script src="js/search.js"&gt;&lt;/script&gt;
      &lt;script src="js/difficulty.js"&gt;&lt;/script&gt;
      &lt;script src="js/random.js"&gt;&lt;/script&gt;
      &lt;script src="js/quiz.js"&gt;&lt;/script&gt;
      &lt;script src="js/sort.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there something I am missing? Thanks.</p>