Search code examples
jquerytemplatesmustache

Display first object in object array using mustache


I am new to Mustache and trying to figure out how to display the first object array in a list using mustache. I woulld like to be able to to pass a varialbe to decide which index of the list will be displayed using the mustache template. for example:

var template = $('#testing_tmp').html();
        var dataId = 1;
        var html =  Mustache.to_html(template, projects[dataId]);
        $('#header').html(html);

Doing this code above it would pass the the data with the given index and display a single object with the given key instead of a whole list of objects.

Here is my code currently:

    <script id="testing_tmp" type="text/template">
        {{#proj}}
            <div>{{id}} go get some {{title}}</div>
        {{/proj}}
    </script>


$('body').on('click', '.logo', function(){
        var projects = { 
            "proj": [
                {
                    id:"1",
                    title:"Ronald",
                    description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
                    technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                    projectLink:"http://www.google.com",
                    genre:"web-app",
                    images: [
                        {largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                    ]
                },
                {
                    id:"2",
                    title:"Jake",
                    description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
                    technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                    projectLink:"http://www.google.com",
                    genre:"web-app",
                    images: [
                        {largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                    ]
                },
                {
                    id:"3",
                    title:"Benny",
                    description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
                    technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                    projectLink:"http://www.google.com",
                    genre:"web-app",
                    images: [
                        {largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                    ]
                }
            ]
        };
        var template = $('#testing_tmp').html();
        //alert(template);
        var html =  Mustache.to_html(template, projects[1]);
        $('#header').html(html);
        });

Solution

  • You can do something like this:

    var html =  Mustache.to_html(template, { "proj" : projects.proj[1] });
    

    Here you are basically just restructuring the object to look like projects, but with only the second object in it.