Backbone.js with collections is not working. Is it a JSON issue?

Question

Hi all I am a neophyte in Backbone.js. I am trying to get my collections working with a RESTful python google app engine based back end. Here is the code used on the server:

def getJson():
    tweets_out = []

    tweets = getModTweets()
    for tweet in tweets:
        temp = {}
        temp["screen_name"] = tweet.screen_name
        temp["text"] = tweet.text
        temp["profile_image_url"] = tweet.profile_image_url
        temp["id"] = tweet.id
        temp["created_at_time"] = tweet.created_at_time
        temp["created_at_epoch"] = tweet.created_at_epoch
        temp["time_lapsed"] = tweet.time_lapsed
        tweets_out.append(temp)


    a = json.dumps(tweets_out)

    return a

The JSON that is produced is as follows:

[{"screen_name": "spolsky", "text": "@greeleygeek I'm going to start doing that", "profile_image_url": "http://a0.twimg.com/profile_images/1770014670/image1327118364_normal.png", "time_lapsed": "3 days ago", "created_at_epoch": 1346464678, "created_at_time": "2012-9-1 01:57:58", "id": 15948437}, {"screen_name": "spolsky", "text": "@phlix google analytics.", "profile_image_url": "http://a0.twimg.com/profile_images/1770014670/image1327118364_normal.png", "time_lapsed": "4 days ago", "created_at_epoch": 1346439185, "created_at_time": "2012-8-31 18:53:05", "id": 15948437}, {"screen_name": "spolsky", "text": "@AdityaAthalye we make it up in volume!", "profile_image_url": "http://a0.twimg.com/profile_images/1770014670/image1327118364_normal.png", "time_lapsed": "4 days ago", "created_at_epoch": 1346425278, "created_at_time": "2012-8-31 15:01:18", "id": 15948437}] 

I try using the following two to try and populate my collection the following two ways with no success:

  var Tweet = Backbone.Model.extend({
        urlRoot : '/tweets.json'
    });


  var Tweets = Backbone.Collection.extend({
        model: Tweet,
        url: '/bulktweets.json'
  });

     var tweets2 = new Tweets();    

    //method 1
tweets2.reset(JSON STRING LISTED ABOVE);
    //Yes tweets2.reset([{"screen_name": "spolsky", "text": "@greeleygeek I'm going to          start doing that", "profile_image_url": "http://a0.twimg.com/profile_images/1770014670/image1327118364_normal.png", "time_lapsed": "3 days ago", "created_at_epoch": 1346464678, "created_at_time": "2012-9-1 01:57:58", "id": 15948437}, {"screen_name": "spolsky", "text": "@phlix google analytics.", "profile_image_url": "http://a0.twimg.com/profile_images/1770014670/image1327118364_normal.png", "time_lapsed": "4 days ago", "created_at_epoch": 1346439185, "created_at_time": "2012-8-31 18:53:05", "id": 15948437}, {"screen_name": "spolsky", "text": "@AdityaAthalye we make it up in volume!", "profile_image_url": "http://a0.twimg.com/profile_images/1770014670/image1327118364_normal.png", "time_lapsed": "4 days ago", "created_at_epoch": 1346425278, "created_at_time": "2012-8-31 15:01:18", "id": 15948437}

]);

    //method 2
    tweets2.fetch();

Could an overflower potentially point me in the right direction? Thanks in advance.

UPDATE: I am able to communicate with the server but the whole collection is not parsed just the first element.

Why would I get the collection ie tweets2.length returning a length of 1 instead of the expected 5? Might someone be able to shed some light?

Answer 1

Assuming you mean tweets2.fetch() here is what might be happening.

First, this line:

tweets2.reset(JSON STRING LISTED ABOVE);

Are you passing in a json STRING or a json array? With reset, if you're just passing in the model attributes you should pass it in as a json array / object.

tweets2.reset("[{'name':'bluejay'},{'name':'cardinal'}]");  // STRING, no good.

tweets2.reset( [{'name':'bluejay'},{'name':'cardinal'}] );  // as json object array, okay!

With your tweets.fetch() you haven't defined or instantiated the variable tweets . I think you mean...

tweets2.fetch();

And if your server is setup correctly returning a json object, then you should be good to go.