I'm struggling to integrate the data from my JSON array into my Mustache template. After spending hours on this task, I'm still unclear about what's missing or possibly overwhelming the code.
It's important to mention that I need to utilize let instead of var for this specific assignment.
Below is the code snippet:
HTML:
<script id="mustacheTemplate" type="x-tmpl-mustache">
<ul id="output">
{{#items}}
<li>{{title}}{{description}}</li>
{{/items}}
</ul>
</script>
JSON:
{ "items": [
{"title": "Mulan",
"description": "Based on the Chinese legend of Hua Mulan, and was Disney's 36th animated feature."
},
{"title": "Beauty and the Beast",
"description": "An adaptation of the fairy tale about a monstrous-looking prince and a young woman who fall in love."
},
{"title": "Aladdin",
"description": "Aladdin is a street-urchin who lives in Agrabah, a large and busy town, long ago with his faithful monkey friend Abu."
]}
}
Javascript:
console.log($);
$(document).ready(function() {
$.getJSON('../data/content.json', result);
function result (data, status){
console.log(data);
let template = $("#mustacheTemplate").html();
let content = data.items;
let output = Mustache.render(template, content);
console.log(output);
$('#output').html(output);
});
});