interpreting backbone collection data that it received from an api controller

Question

I'm trying to use a simple collection and view to write out data from my backbone collection to my website. I just want to iterate over the collection and display properties like Id, Name, etc. in my template.

My collection gets its data from an api controller(a sample of the data is shown below).

My limited knowledge leads me to guess that the api controller is returning an object and not JSON.

So I'm guessing that is messing up my results. I've written out the collection to my Chrome console and attached a screenshot of what I see below.

So looking at the code below, is there a way that I can format the data returned from the api so that my collection can use it effectively?

Here is the code:

   var ResearchCollection = Backbone.Collection.extend({
       url: '/api/lab',

       getresearch: function() {
           this.fetch({
               url: this.url
           });
       }
   });

var researchCollection = new ResearchCollection();

return Backbone.View.extend({
    className: 'labRender',
    template: _.template(tmpl, null, { variable: 'x' }),

 render: function () {
        researchCollection.getresearch();
        console.log('collection: ', researchCollection);
     }

Basically, I just want to iterate over my collection and display properties like Id, Name, etc. in my template.

Here is the raw data from the api controller that I am using to populate my collection:

{
  "odata.metadata":"http://sol.edu/SOM/Api/v1/$metadata#ApiKeys","value":[
    {
      "odata.id":"http://sol.edu/SOM/Api/v1/ApiKeys('2f2627ed-3a97-43aa-ac77-92f227888835')","Id":"2f2627ed-3a97-43aa-ac77-92f227888835","Name":"VideoSearch","TimeoutInMinutes":20160,"IsDefault":false,"CreateAuthTicketsForResources":false,"ReportAuthFailureAsError":false,"ExcludePrivatePresentations":true,"Internal":true,"ViewOnlyAccessContext":true
    }
  ]
}

when piped to the browser's console(why is each character a separate attribute?):

Answer 1

I think maybe this is because you mixed up collection and model. In Backbone, Model are fundamental unit, a Model can be used to render a template.However, Collection are ordered sets of 'Models'. So, if you just want to transform a data like you describe above, you may better select a Model instead of 'Collection'. Just try this:

var ResearchModel = Backbone.Model.extend({

       initialize: function(attributes) {
           this.url = 'api/lab'
       }
   });

// when you initialize a Model or collection, the first parameter is the attribute you want to initialize
var researchModel = new ResearchModel({});

return Backbone.View.extend({
    className: 'labRender',
    template: _.template(tmpl, null, { variable: 'x' }),

 render: function () {
        researchModel.fetch();
        console.log('collection: ', researchModel);
     }

Otherwise, if you just want to use collection, you had better specify its Model.Backbone use JSON, so you can also specify the model with your key.