Backbone looping through and getting value from nested collection

Question

I have a problem accessing nested values in my backbone collection. So far i've managed to get out some values. Here is the html and javascript code aswell as my result: Code: http://jsfiddle.net/mM2Mk/4/ Result: http://tinypic.com/r/2qn3amu/6

However the collection in this solution doesn't follow the structure of my actual api. The structure I'm trying to get to work look like this:

teamsCollection = new Standings.Collections.TeamsCollection([
{
    credit: {
        message: "Provided by ",
        link: "",
        logoUrl: ""
    },
    metadata: { },
    groups: [
        {
            labels: [ ],
            standings: [
                {
                    team: {
                        id: 9369,
                        name: "IF Elfsborg",
                        shortName: "Elfsborg",
                        link: ""
                    },
                    stats: [
                        {
                            name: "gp",
                            value: 30
                        },
                        {
                            name: "w",
                            value: 18
                        },
                        {
                            name: "d",
                            value: 5
                        },
                        {
                            name: "l",
                            value: 7
                        },
                        {
                            name: "gf",
                            value: 48
                        },
                        {
                            name: "ga",
                            value: 29
                        },
                        {
                            name: "gd",
                            value: 19
                        },
                        {
                            name: "pts",
                            value: 59
                        }
                    ]
                },
      {
                    team: { 
                        id: 19740,
                        name: "BK Häcken",
                        shortName: "Häcken",
                        link: ""
                    },
                    stats: [
                        {
                            name: "gp",
                            value: 30
                        },
                        {
                            name: "w",
                            value: 17
                        },
                        {
                            name: "d",
                            value: 6
                        },
                        {
                            name: "l",
                            value: 7
                        },
                        {
                            name: "gf",
                            value: 67
                        },
                        {
                            name: "ga",
                            value: 36
                        },
                        {
                            name: "gd",
                            value: 31
                        },
                        {
                            name: "pts",
                            value: 57
                        }
                    ]
                },

This code gives us some sport results such as games played, wins, goal difference, etc. This is only one team out of several others that follow in the collection. My question now is how do i loop through the nested values and display them just as I did in my example(tinypic url above). My goal is to get the team name along with the stats and display them in the html. And so on with the rest of the teams.

Answer 1

Simply use a template and loop through your array with a foreach to put your accordion HTML in place.

You can either use Underscore's templates which are already included as Underscore is a dependency of Backbone.
Or you can use another template engine such as Handlebars: source.

Both give examples of how to loop through objects.

Edit:
Let's do a random template (with underscore, it's harder):

<script id="myTemplate">
<% _.each(standings, function(standing) { %>
  <a href="<%= standing.team.link %>"><%= standing.team.name %></a><br/>
  <ul>
  <% _.each(standing.stats, function(stat) { %>
    <li><%= stat.name %>: <%= stat.value %></li>
  <% } %>
  </ul>
<% } %>
</script>

Then compile it and call it with your groups[0] or something like that.

_.template($('#myTemplate').html(), groups[0]);

or

var myTemplate = _.template($('#myTemplate').html());
myTemplate(groups[0]);

Of course you'll have to adapt the values, but here's the thing.