Accessing deeper objects with Mustache.JS

Question

This is part of my JSON file

{
  "topic": {
    "topicTitle": "Living things and the environment",
    "subTopics": [
  {
    "subTopicTitle": "Identifying, namimg and classifying",
    "subTopicShortName": "identifyingNamingClassifying",
    "subTopicDescription": "About one and a half million kinds of organisms have been discovered. How do we identify, name and classify them?",
    "subTopicQuestions": [
      {
        "question": "Use the key to identify the plants a to e in picture 1.",
        "subTopicQuestionAssetLinks": [
          "href://file/filename/image1.jpeg"
        ],
        "subTopicQuestionAssetCaptions": [
          "Caption 1"
        ]
      },

And this is my javascript

<script>
    $.getJSON('data.json', function(data1) {
        intro_template = "<h1> {{topic.topicTitle}} </h1> <h2>  {{topic.subTopics}} </h2>";
        html = Mustache.to_html(intro_template, data1);
        $('.intro_template_container').html(html);
    });     
</script>

The h1 works perfectly displaying "Living things and the environment"

Beween the H2 tags I would like to show the "subTopicTitle" of "identifying, name and classifying"

How is this possible?

Answer 1

Since subTopics is an array, you will have to use a mustache section:

<h1>{{topic.topicTitle}}</h1>
{{#topic.subTopics}}
    <h2>{{subTopicTitle}}</h2>
{{/topic.subTopics}}