Backbone nested json object rendered in list

Question

I am currently trying to render out this json object in a ul. I'd like to be able to cycle through the GamesList and get the games and their attributes in a list. I've kinda hit a wall where I am not entirely sure how to accomplish this. Still very new to backbone so any help would be greatly appreciated.

JSON Object:

{
   "GamesList":[
      {
         "Date":"2013/07/02",
         "Games":[
            {
               "Id":"3252",
               "Time":"12:10 AM"
            }
         ]
      },
      {
         "Date":"2013/07/02",
         "Games":[
            {
               "Id":"3252",
               "Time":"12:10 AM"
            }
         ]
      },
      {
         "Date":"2013/07/02",
         "Games":[
            {
               "Id":"3252",
               "Time":"12:10 AM"
            }
         ]
      }
   ]
}

App Structure:

 App.Models.Game = Backbone.Model.extend({
        defaults: {
            GamesList: ''
        }
    });


    App.Collections.Game = Backbone.Collection.extend({
        model: App.Models.Game,
        url: 'path/to/json',

        parse: function (response) {
            return response;
        }
    });

    App.Views.Games = Backbone.View.extend({
        tagName: 'ul',

        initialize: function () {
            this.collection = new App.Collections.Game();
            this.listenTo(this.collection, 'reset', this.render, this);
            this.collection.fetch();
        },

        render: function () {
            //filter through all items in a collection
            this.collection.each(function (game) {
                var gameView = new App.Views.Game({
                    model: game
                });
                this.$el.append(gameView.render().el);
            }, this)

            return this;
        }
    });

    App.Views.Game = Backbone.View.extend({
        tagName: 'li',

        template: _.template($('#gameTemplate').html()),

        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });


    var gameCollection = new App.Collections.Game();
    gameCollection.fetch({
        data: {
            collection_id: 25
        },
        success: function (data, textStatus, jqXHR) {
            console.log(data);
            console.log(textStatus);
            console.log(jqXHR);
            console.log('success');


        },
        error: function () {
            alert('Oh noes! Something went wrong!')
        }
    });

    var gamesView = new App.Views.Games({
        collection: gameCollection
    });


    $(document.body).append(gamesView.render().el);

Answer 1

I'm seeing a little confusion in it. Let's proceed step by step:

--------- AFTER COMMENT ---------

You can set your model as:

defaults: {
    Date:'',
    Games:''
}

then modifying your parse function as

parse: function (response)
{
    var _this = this;
    _.map(response, function(obj) {
        _this.add(obj)
    });
}

This way you add each single item in the collection as your model expect.

Another problem I'm seeing is that you're creating and fetching the collection twice:

...
this.collection = new App.Collections.Game();
this.listenTo(this.collection, 'reset', this.render, this);
this.collection.fetch();
...

and then

var gameCollection = new App.Collections.Game();
...
gameCollection.fetch({
    data: {
    ....
...
var gamesView = new App.Views.Games({
    collection: gameCollection
});

Answer 2

It looks like your JSON object is not inlined with Backbone.Collection...

as you declared App.Collections.Game has url /path/to/json which means the json that needs to return is a list... without the GamesList that is seen in your JSON

EDIT:

You can use the parse function in your Games Collection to fix the json retrieved from your server

parse:function(response){
      return response.GamesList;
}

Important: Please note that your json objects that are fetched from the server should have ID. Backbone will 'think' these models are new and will create them upon save...