1

Try to use backbone collection to initialize grabbing the json data, but turns out the data is empty. Does backbone collection automatically parse the json data to the model or we have to manually parse it? 

 var Book = Backbone.Model.extend({
    title:"",
    isbn:"",
    img:""  
 });

 var Books = Backbone.Collection.extend({
    model:Book,
    url:'latest.json',
    // parse:function(data){
    //  console.log(data);
    // },       
    initialize: function(){
        this.fetch();
    }
 });

Edited to add in my sample json, I validate with jsonlint.com.

[
    {"title":"American Pie","isbn":"345354356","img":"/image/pie.png"},
    {"title":"Long Tails","isbn":"567575576g","img":"/image/long_tails.png"},
    {"title":"Pirates","isbn":"567575765","img":"/image/pirates.png"}
]

Added in JSFiddle link.

http://jsfiddle.net/mochatony/5E3Nc/14/

TonyTakeshi
  • 5,869
  • 10
  • 51
  • 72
  • You don't need to manually parse the data if the data if in the correct format. How does your `latest.json` response look like? – fguillen May 03 '12 at 08:39
  • Also check in your browser's console to see if the url requested is correct I miss a `/` in the beginning of this `url`. – fguillen May 03 '12 at 08:41
  • @fguillen. Thanks for reply. I check my browser console, and it loads properly. But when I dump the book.toJSON(), it return an [], looks like it did not parse it properly. – TonyTakeshi May 03 '12 at 08:48
  • Of-topic: beware that the lines as `title:""` are not a proper way to initialize default **attributes** of a Model. Use [Model.defaults](http://documentcloud.github.com/backbone/#Model-defaults) instead. – fguillen May 03 '12 at 11:10

1 Answers1

1

You need to make sure these work first

  • No Script errors ( Inspect them in javascript console)

  • Collection.fetch makes a request to correct url ( see resources section in Chrome web inspector)

  • Check that response mime/type is right "application/json" and Server indeed serves JSON string

  • Make sure the JSON response is well formed ( I had this problem . It must be a array and not a object ex : [{},{},{},{}])

  • Lastly refresh from the server ( clear the cache)

Update

Here is a JsFiddle to demonstrate the use http://jsfiddle.net/5E3Nc/16/

note: Parse must explicitly be written only when custom response is sent from server from which you want to build the models collection

by the way, i notices you did this

initialize:function(){
  this.fetch();
}

this won't work. You are expected to use the collection outside of the collection itself for example

var col = Backbone.Collection.extend({url:"data.json"});
var instance = new col({model:Tweet});
instance.fetch();
Community
  • 1
  • 1
Deeptechtons
  • 10,945
  • 27
  • 96
  • 178
  • Thanks. Tested it. But did not works either. Maybe I will try with a jsfiddle. – TonyTakeshi May 03 '12 at 08:50
  • 1
    I want to add that you can add a `success` and `error` callbacks to your `fetch()` call to see if something is there like: `instance.fetch({ error: function(){ console.log( "ERROR" ); } });` – fguillen May 03 '12 at 08:55
  • @TonyMocha How do you say it did not work. Please check `instance.models` to see if it contains the models from the server #http://documentcloud.github.com/backbone/#Collection-models – Deeptechtons May 03 '12 at 09:04
  • @Deeptechtons not sure I understand it well. Here's the jsfiddle I did for trying to display the object.http://jsfiddle.net/mochatony/5E3Nc/14/ – TonyTakeshi May 03 '12 at 10:25
  • @TonyMocha Well it happens. People new to Backbone world are often get confused. Here is a JS Fiddle for you http://jsfiddle.net/5E3Nc/16/ note that for ajax request `echo/json/` means replace `json` with the response to be sent for ajax requests – Deeptechtons May 03 '12 at 10:45
  • @Deeptechtons. If I fetched JSON data from variable than ajax, it is working fine. But my scenario is I have to load the JSON data externally, any chance to make it work? – TonyTakeshi May 03 '12 at 12:46