JSON数组插入小胡子

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

Answer 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>

</div>