Load data into a Backbone collection from JSON file?

Question

I\'m trying to load some data into a Backbone Collection from a local JSON file, using this very basic code:

  window.Student = Backbone.Model.extend({
  })         


        

Answer 1

I think you need to add {add:true} to the options of fetch,

if you assigned the fetch to a variable, you would get the result as well, but then its not inside the collection you wanted

Answer 2

I/O operations in javascript are almost always asynchronous, and so it is with Backbone as well. That means that just because AllStudents.fetch has returned, it hasn't fetched the data yet. So when you hit your console.log statement, the resources has not yet been fetched. You should pass a callback to fetch:

AllStudents.fetch({ url: "/init.json", success: function() {
    console.log(AllStudents);
}});

Or optionally, use the new promise feature in jQuery (fetch will return a promise):

AllStudents.fetch({ url: "/init.json" }).complete(function() {
    console.log(AllStudents);
});

Answer 3

The attribute names and non-numeric attribute values in your JSON file must be double quoted (" ") . Single quotes or no-quotes produces errors and response object is not created that could be used to create the models and populate the collection.

So. If you change the json file content to :

[
  { "text": "Amy", grade: 5 },
  { "text": "Angeline", grade: 26 },
  { "text": "Anna", grade: 55 }    
]

you should see the non-empty collection object.

You can change your code to see both success and failure as below:

    AllStudents.fetch({ 
    url: "/init.json", 
    success: function() {
          console.log("JSON file load was successful", AllStudents);
      },
    error: function(){
       console.log('There was some error in loading and processing the JSON file');
    }
  });

For more details, probably it will be a good idea to look in to the way ajax response objects are created.

Answer 4

fetch() returns a 'success' notification as already stated, but that just means that the server request was successful. fetch() brought back some JSON, but it still needs to stuff it into the collection.

The collection fires a 'reset' event when it's contents have been updated. That is when the collection is ready to use...

AllStudents.bind('reset', function () { alert('AllStudents bind event fired.'); });

It looks like you had this in your first update. The only thing I did differently was to put fetch() in front of the event binding.