Looping through unnamed array objects with backbone and dust

Question

I have a JSON formed like you can see further below. I am having trouble looping through and defining the correct points to loop over, as I'm not that experienced with arrays in objects and complicated JSON.

What I'm mainly looking for is some pointers on the parse / toJSON parts of my collection, or other places I might be failing with this particular structure.

I am trying to loop over the values and output data from the event and the type name using backbone and dust. Normally I can just loop over my JSON by defining the collection in the view, e.g. calling this like so:

dust.render("dialog-decoderevents-items", { events : currentUser.eventList.toJSON() }, function(err, out) {
            _this.$(".ab-tvg-prg-opt-future").append($(out));
        });

That would normally allow me to just make a loop in dust and output data like this:

{#events}
{#tvProgram}{name}{/tvProgram}
{type}
{/events}

I have tried the dust examples using array and current context on this JSON and it will output something with no problem. I think the problem lies in what I define as the starting point of the model and collection.

I have both a parse function and a toJSON function in my collection now. But I also don't know what to define as an id on the model, since as you can see the id is defined inside the event, and not on the outside where I'd normally use it. Ideas? All the data is below.

JSON

{
"status": null,
"value": [
{
"event": {
    "id": "RWtzdHJlbSBvcHBkcmFnZWxzZTxsZHR2cGQ+MTM2NDMwMDQwMDAwMDxsZHR2cGQ+MTM2NDMwNDAwMDAwMA==",
    "name": "A glorious event",
    "description": "Some long description about the event",
    "startTime": {
        "year": 2013,
        "month": 3,
        "date": 26,
        "hour": 13,
        "minute": 20,
        "seconds": 0
    },
    "endTime": {
        "year": 2013,
        "month": 3,
        "date": 26,
        "hour": 14,
        "minute": 20,
        "seconds": 0
    }
},
"type": "Party"
},
{
"event": {
    "id": "Rmx5aW5nIFdpbGQgQWxhc2thPGxkdHZwZD4xMzY0MzA2NDAwMDAwPGxkdHZwZD4xMzY0MzEwMDAwMDAw",
    "name": "A glorious event",
    "description": "Some long description about the event",
    "startTime": {
        "year": 2013,
        "month": 3,
        "date": 26,
        "hour": 15,
        "minute": 0,
        "seconds": 0
    },
    "endTime": {
        "year": 2013,
        "month": 3,
        "date": 26,
        "hour": 16,
        "minute": 0,
        "seconds": 0
    }
},
"type": "Birthday"
},
{
"event": {
    "id": "UG9pcm90PGxkdHZwZD4xMzY0MzE2NjAwMDAwPGxkdHZwZD4xMzY0MzE5NjAwMDAw",
    "name": "A glorious event",
    "description": "Some long description about the event",
    "startTime": {
        "year": 2013,
        "month": 3,
        "date": 26,
        "hour": 17,
        "minute": 50,
        "seconds": 0
    },
    "endTime": {
        "year": 2013,
        "month": 3,
        "date": 26,
        "hour": 18,
        "minute": 40,
        "seconds": 0
    }
},
"type": "Birthday"
},
{
"event": {
    "id": "VGhlIEJpZyBCYW5nIFRoZW9yeTxsZHR2cGQ+MTM2NDMxOTAwMDAwMDxsZHR2cGQ+MTM2NDMyMDgwMDAwMA==",
    "name": "A glorious event",
    "description": "Some long description about the event",
    "startTime": {
        "year": 2013,
        "month": 3,
        "date": 26,
        "hour": 18,
        "minute": 30,
        "seconds": 0
    },
    "endTime": {
        "year": 2013,
        "month": 3,
        "date": 26,
        "hour": 19,
        "minute": 0,
        "seconds": 0
    }
},
"type": "Birthday"
}]}

Model

var mainEvent = Backbone.Model.extend({
    idAttribute : "id",

    defaults : {
        type: null,
        event : {
            id : null,
            name: null,
            description: null,
            channelId: null,
            startTime: null,
            endTime: null
        }
    }

});

Collection

var eventCollection = Backbone.Collection.extend({
model: mainEvent,

parse : function(json, options) {            
    var retr = [], tmp;

    if (json.status === ajaxStatus.success) {

        switch(options.action) {
              default:
                retr = json.value;
                break;    
        }

        if (options.action === "events") {
            currentUser.eventList = new eventCollection(retr, { action : "events" });
        }

    }
    else if (json.status === ajaxStatus.notAuthenticated) {
        currentUser.trigger("notLoggedIn");
        return [];
    }
    return retr;
},
toJSON : function(){

    var ret = this.constructor.__super__.toJSON.call(this);

    // _.each(ret, function (item) {  
    //     console.log('l1'+item);
    //     ret.push(item);

    // });            
    return ret;
}
});

exxodus7 exxodus7 · Accepted Answer · 2013-03-26T20:03:10

Idea after quickly reading over your issue (take it with a grain of salt as I've never used dust or backbone before):

Couldn't you just create a controller that stores a content array for each event object? That way, all you would have to do when you were extracting the JSON file is add each event to the controller, and iterate over that in your HTML. You could then extract the id with id = event[id] or something.

EDIT: Here's an example with AJAX, I know you're not using that but the parsing bit should at least be helpful:

function getParties() {
  $.ajax({
    url: 'json/party.json',
    dataType: 'json',
    async: false,
    success: function(data) {
      console.log("Data:", data.value);
      for (var i=0, occurence; occurence = data.value[i]; i++) {
        var event = {};
        event.type = occurence.type;
        for (var key in occurence.event) {
          event[key] = occurence.event[key];
        }
        console.log("Event:", event);
        // Do something with event... Maybe add to content array.
      }
    }
  });
}

The "event" should now be in simple javascript. If you want to access a known field within it, you can say event["id"] for example. To iterate through all values, use the following loop.

for (var key in event) {
  console.log("Key: " + key + ", Value: " + event[key]);
}

You also should be able to get the value with {id}, for example, in Backbone. Something similar works in Ember when the created "event" objects are pushed to some controller's content array, which is what I'm using.

Looping through unnamed array objects with backbone and dust

1 Answers