JSON Array into Mustache

Question

I'm trying to get the data from my JSON array to be displayed in my Mustache template. I've been at this for hours, and I still don't know what I'm missing (or maybe have too much of?).

Please note that this particular task requires me to use let instead of var.

Here is my code:

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);
    });
});

Kalaiselvan A I did! Thank you! But nothing shows up still. :( — daezilla
– daezilla, Commented Dec 2, 2017 at 5:29

Kalaiselvan · Accepted Answer · 2017-12-02 05:42:46Z

1

while passing render you need to pass your data instead of data.item

here I commented your $.getJSON('../data/content.json', result);

It could be helpful to you

function result (data, status){
      data={ "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."}
    ]
};
        //console.log(data);

        let template = $("#mustacheTemplate").html();
//console.log(template)
        let content = data;

        let output = Mustache.render(template, content);
        //console.log(output);

        $('#output').html(output);
        }
$(document).ready(function() {

    //$.getJSON('../data/content.json', result);

    
   result(1,5);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script id="mustacheTemplate" type="x-tmpl-mustache">
<ul>
{{#items}}
    <li>{{title}}{{description}}</li>
{{/items}}
</ul>
</script>

<div id="output"></div>

answered Dec 2, 2017 at 5:42

Kalaiselvan

2,1441 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

daezilla Over a year ago

thanks! I looked through your code, added let content = data to mine, and even tried the separate <div> with the output id, however it does not print anything

Kalaiselvan Over a year ago

i thought you missed something in your code its works fine in above snippet right

daezilla Over a year ago

yes it does, but my json has to be in a different file and not within the same function :/

Kalaiselvan Over a year ago

your json data is the problem first you should fix that one and i mention it in above comment } is missing in your JSON data

daezilla Over a year ago

I did add the } after seeing your comment

|

Collectives™ on Stack Overflow

JSON Array into Mustache

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related