OK. I'm starting out on Backbone.js, and trying to do some very simple things. Here's a very simple Model and Collection.

// my model
Friend = Backbone.Model.extend({});

// my collection
Friends = Backbone.Collection.extend({});

// instantiate friends and add some friends objects!
var friends = new Friends();
friends.add([
  {name: "James"},
  {name: "Michael"}
]);

console.log(friends.length) // prints out 2! which is correct!

Above example is fine. But now I want to initialize my collection from server, which returns the exact same JSON object.

// my model
Friend = Backbone.Model.extend({});

// my collection
Friends = Backbone.Collection.extend({
  url: 'http://localhost/myapp/get_users'
});

// instantiate friends and add some friends objects!
var friends = new Friends();
friends.fetch();

console.log(friends.length) // prints out 0! WHY???

I've been looking at my Chrome inspection panel for both of them and regardless, I have no idea why one from the server is not working?

FYI, on the server side, I have CodeIgniter 2.02, using Phil Stuegeon's REST API to return a JSON data.

I've also tried a simple function on my PHP side, like

function get_users() {
  echo '{name:"James"}, {name:"Michael"}';
}

But without any success.

What am I doing wrong here?

OK. I'm starting out on Backbone.js, and trying to do some very simple things. Here's a very simple Model and Collection.

// my model
Friend = Backbone.Model.extend({});

// my collection
Friends = Backbone.Collection.extend({});

// instantiate friends and add some friends objects!
var friends = new Friends();
friends.add([
  {name: "James"},
  {name: "Michael"}
]);

console.log(friends.length) // prints out 2! which is correct!

Above example is fine. But now I want to initialize my collection from server, which returns the exact same JSON object.

// my model
Friend = Backbone.Model.extend({});

// my collection
Friends = Backbone.Collection.extend({
  url: 'http://localhost/myapp/get_users'
});

// instantiate friends and add some friends objects!
var friends = new Friends();
friends.fetch();

console.log(friends.length) // prints out 0! WHY???

I've been looking at my Chrome inspection panel for both of them and regardless, I have no idea why one from the server is not working?

FYI, on the server side, I have CodeIgniter 2.02, using Phil Stuegeon's REST API to return a JSON data.

I've also tried a simple function on my PHP side, like

function get_users() {
  echo '{name:"James"}, {name:"Michael"}';
}

But without any success.

What am I doing wrong here?

• javascript
• backbone.js

3 Answers 3

Have you forgot the [] to make it an array?

 echo '[{name:"James"}, {name:"Michael"}]';

Also you check the length in the onsuccess method you can pass to fetch. At the moment you check the length directly after fetching, so your not sure if the result is still loaded.

friends.fetch(
   {success:function(){
       console.log(friends.length)
   }}
);

fetch() is an asynchronous call, so you'll be printing to the console before the fetch() has returned to populate your collection

To verify, put a breakpoint on the console.log(friends.length) line. The breakpoint will give the fetch() time to happen

I think the JSON you're passing to .add() is invalid. You've got:

[
  {name: "James"},
  {name: "Michael"}
]

But you need to quote the keys too:

[
  {"name": "James"},
  {"name": "Michael"}
]