Question

I have a Backbone model that is making a successful server request. The callback is using backbone’s trigger method to trigger an event in the associated view, and its passing the parsed json response from the server request as the second parameter of the trigger method, as described in the backbone documents. In the view, the event triggers the render method, but the response object is null in the view. It’s throwing this error

Uncaught TypeError: Cannot read property 'word' of null 

Can anyone see what I might be doing wrong?

The server request from the model

  new: function() {
      var _this = this;
       console.log("new function of model"); 

      $.ajax({
        url: "/gamestart",
        type: "GET",
        success: function(response) {
          console.log(response);
          var json = $.parseJSON(response);

          _this.set({lost: false});
          _this.set({win: false});
          _this.trigger("gameStartedEvent", json);
        }
      })
    },

the event in the initializer method of the view which triggers the render method to render the response

this.model.on("gameStartedEvent", this.render, this);

the render method where the response is null

render: function(response) {
      $("#hint").show();
      console.log(response); 
      var html = this.template({characters: response.word});
      this.el.hide();
      this.el.html(html).show();
    },

Note, if it matters, the view is being instantiated with the model

var word_view = new WordView({model: game})

Update

Actually the error’s happening here. The response is returning successfully but i’m parsing it incorrectly. The variable json is null when I check the console. Can you see what I’m doing wrong?

 var json = $.parseJSON(response);
 console.log(json)

Response

Object {word: Array[6]}
word: Array[6]
__proto__: Object

Answer 1

There was actually no need to call parseJSON on the response object. I could get the word property directly off the response object, so I just passed the response object as the second argument to trigger, and called response.word in the view.

 $.ajax({
        url: "/gamestart",
        type: "GET",
        success: function(response) {
          console.log(response.word);
          var json = $.parseJSON(response);    ####unnecessary to parseJSON here
          console.log(json);

          _this.set({lost: false});
          _this.set({win: false});
          _this.trigger("gameStartedEvent", response);
        }
      })
    },