Help accessing deep level JSON in Mustache template [Solved]

JavaScript
1

Hi all,

I’ve been using the Mustache.js templating system for the past few days, exciting stuff!

The problem is, I have a third party JSON file with some serious deep level nesting with arrays etc. having a little trouble trying to access the values I need.

Reduced for viewing

{
   "question":{
      "query":"podcasts",
      "collection":{ },
      "originalQuery":"podcasts",
   },
   "response":{
      "resultPacket":{
         "details":{ },
         "query":"podcasts",
         "results":[
            {
               "rank":1,
               "score":10,
               "title":"example title of podcast",
               "meta":{
                  "filetype":"mp3",
                  "keywords":"abd,def,xyz"
               }
            },
            {
               "rank":2,
               "score":35,
               "title":"example title two of podcast",
               "meta":{
                  "filetype":"mp3",
                  "keywords":"abd,def,xyz"
               }
            },
            {
               "rank":3,
               "score":18,
               "title":"example title three of podcast",
               "meta":{
                  "filetype":"mp3",
                  "keywords":"abd,def,xyz"
               }
            },
         ]
      }
   },
}

I need to loop through the results set within response and display the title value and values inside the meta array.

How do I do this?

I currently have:

<script id="resultstpl" type="text/template">
  <div class="container">
    {{#question}}
    <p>{{query}}</p>

    {{/question}}
  </div>
</script>

Which prints podcasts though I need to access the results array.

Update: Added a codepen if this helps - https://codepen.io/anon/pen/wyVoOa

Any examples appreciated :slight_smile:
Thanks, Barry

2

Assuming json is a json object corresponding to the above.

json.response.results.forEach(function (result) { document.getElementById("myDivOutput").innerHTML = document.getElementById("myDivOutput").innerHTML + "<p>" + result.title+" "+result.meta.filetype+" "+result.meta.keywords+"</p>" })
3

Thanks @m_hutley

How would I fit this into the Mustache template?
Any examples of this.

I added a codepen if it helps.

I did try using the dot notation shown below after a bit of reading, though, no errors, but no data :upside_down:

{{#response.resultPacket.results}}
    <p>{{title}}</p>
{{/response.resultPacket.results}}

Barry

4

I dont know Mustache, but a quick google search tells me i think the answer should be

{{#response.resultPacket}}
    {{#results}}
       {{title}}
       {{meta.filetype}}
       {{meta.keywords}}
    {{/results}}
{{/response.resultPacket}}

?

1 Like
5

It works! :grinning:

Thanks a lot, been at this all night :sunglasses: :grin:

Really helped thanks.

I’ve saved the test codepen above for anybody else might need a quick reference.

Barry

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.