This is my first Ember.js application. I'm building a multiple choice question (eventually a quiz). Whenever the submit button is clicked it should highlight the choice as green for correct or red for incorrect. I get the error "Uncaught TypeError: undefined is not a function" on option.set("highlight", "green") || option.set("highlight", "red) in my controllers/index.js file. When I console.log(option) I can see there is an object with the property highlight. What am I doing wrong?

routes/index.js

var IndexRoute = Ember.Route.extend({
   model: function() {
     return Ember.A([
      {
        question: "What's up?",
        answer: 'option b',
        options: [
          {
            text: "option a",
            active: false,
            highlight: ''
          },
          {
            text: "option b",
            active: false,
            highlight: '1'
          }
        ]
      },
      {
        question: "How many?",
        answer: 'two',
        options: [
          "one",
          "two"
        ]
      }
     ]);
   }
 });

controllers/index.js

var IndexController = Ember.ObjectController.extend({
  actions:{
    submitAction : function(){
      this.get('model').forEach(function (item){
        item.options.forEach(function (option) {
          if (option.text === item.answer) {
            console.log(option);
            option.set("highlight", "green");
            console.log(option.highlight);
          }
          if (option.active && (option.text !== item.answer)) {
            option.set("highlight", "red");
          }
        });
      });
    }
  }
});

This is my first Ember.js application. I'm building a multiple choice question (eventually a quiz). Whenever the submit button is clicked it should highlight the choice as green for correct or red for incorrect. I get the error "Uncaught TypeError: undefined is not a function" on option.set("highlight", "green") || option.set("highlight", "red) in my controllers/index.js file. When I console.log(option) I can see there is an object with the property highlight. What am I doing wrong?

routes/index.js

var IndexRoute = Ember.Route.extend({
   model: function() {
     return Ember.A([
      {
        question: "What's up?",
        answer: 'option b',
        options: [
          {
            text: "option a",
            active: false,
            highlight: ''
          },
          {
            text: "option b",
            active: false,
            highlight: '1'
          }
        ]
      },
      {
        question: "How many?",
        answer: 'two',
        options: [
          "one",
          "two"
        ]
      }
     ]);
   }
 });

controllers/index.js

var IndexController = Ember.ObjectController.extend({
  actions:{
    submitAction : function(){
      this.get('model').forEach(function (item){
        item.options.forEach(function (option) {
          if (option.text === item.answer) {
            console.log(option);
            option.set("highlight", "green");
            console.log(option.highlight);
          }
          if (option.active && (option.text !== item.answer)) {
            option.set("highlight", "red");
          }
        });
      });
    }
  }
});

• javascript
• ember.js

• 3 The object option is not an Ember Object so it hasn't the get/set methods. emberjs.com/api/classes/Ember.Object.html – Gorzas Commented Jul 30, 2014 at 14:59
• 3 If u dont know if u have an ember object or not use Em.set(myObject, 'name'). That will always work. But maybe convert your objects to an Em.Object? – Lux Commented Jul 30, 2014 at 15:09
• 1 Will you guys put these as the answer instead of a comment so he can mark it correct. – Kingpin2k Commented Jul 30, 2014 at 15:30

1 Answer 1

The object option is not an Ember Object so it doesn't have the get/set methods.

As Krutius said, you can use Ember.get()/Ember.set() to set properties to a plain old JavaScript object or an Ember Object. Example:

Ember.set(myObject, 'property', value);
var val = Ember.get(myObject, 'property');

Documentation

set: http://emberjs.com/api/#method_set

get: http://emberjs.com/api/#method_get