Showing all items in a list in underscore.js (using Parse.com)

Question

I'm building an app in Parse.com (javascriptSDK), and am stuck as to how to show a list of items I've pulled in from the database.

The items are in this format when they get pulled in from Parse:

{
    "results":[
        {
            "name": "End of summer", 
            "owner": {
                "__type": "Pointer", 
                "className": "_User", 
                "objectId": "D4ttcoN6ex"
            }, 
            "createdAt": "2012-09-03T09:21:50.144Z", 
            "updatedAt": "2012-09-03T09:21:50.144Z", 
            "objectId": "Xp8Mz24fI3"
        }, {
            "name": "My summer holidays", 
            "owner": {
                "__type": "Pointer", 
                "className": "_User", 
                "objectId": "D4ttcoN6ex"
            }, 
            "createdAt": "2012-09-03T09:17:15.515Z", 
            "updatedAt": "2012-09-03T09:17:15.515Z", 
            "objectId": "hjqVThNgXu"
        }, {
            "name": "My summer", 
            "owner": {
                "__type": "Pointer", 
                "className": "_User", 
                "objectId": "D4ttcoN6ex"
            }, 
            "createdAt": "2012-09-03T09:17:31.139Z", 
            "updatedAt": "2012-09-03T09:17:31.139Z", 
            "objectId": "0UEHHXtyBG"
        }, {
            "name": "First day of school", 
            "owner": {
                "__type": "Pointer", 
                "className": "_User", 
                "objectId": "D4ttcoN6ex"
            }, 
            "createdAt": "2012-09-03T09:21:37.315Z", 
            "updatedAt": "2012-09-03T09:21:37.315Z", 
            "objectId": "W1OKKwLXmz"
        }
    ]
}

So, basically, a list of folders, each with a name, owner, createdAt, updatedAt and an objectId.

I want to show these in a list, using the underscore.js template.

Using the underscore documentation, I came up with this:

<ul>
    <% _.each( folderList["results"], function( listItem ) { %>  
        <li><%= listItem["name"] %></li>
    <% }); %>
</ul>

(where folderList is the array above).

But this doesn't show anything, apart from <ul></ul> - no errors or anything. If I do _.size(folderList), it shows '4', which is the correct number of items.

I have no idea what I'm doing, and can't find any good documentation on Underscore.

Answer 1

I think you assigning folderList["results"] to the template instead of folderList. You should check how you assign folderList variable to the compiled_template function.

compileFolderList=function(folderList){
      var compiled_template=_.template(' <ul><% _.each( folderList["results"], function( listItem ) { %>    <li><%= listItem["name"] %></li><% }); %></ul>'); //Compile template string 

      var html=compiled_template({'folderList':folderList}); // Assign variables that used in the template.
      return html;
}

var folderList={"results":[{"name":"End of summer","owner":{}}]};
$("body").append(compileFolderList(folderList));