SpaceFozzy SpaceFozzy - 1 month ago 8
Javascript Question

Ember service is undefined after being injected into a component and used in a computed property

I've made a relatively straight-forward Ember service and am trying to inject it into a component via the Ember Docs and this tutorial. However after injecting the service and calling one of its functions via a computed property, I get the error:

TypeError: undefined is not an object (evaluating 'this.get('businessValidator').validate')


I've tried using the debugger to log out this.get('businessValidator') and it returns undefined, as does using console.log. I've tried initializing the component both by name (as below) and implicitly (without the name, as it should work per the Ember docs and unmarked solution here). The model passed to the component is the business the businessValidation service needs to validate. I've done plenty of unit testing on the service itself.

/components/production-checker.js:

import Ember from 'ember';

export default Ember.Component.extend({
businessValidator: Ember.inject.service('business-validator'),
doesBusinessValidate: Ember.computed('model', function() {
if (this.get('businessValidator').validate(this.get('model'))) {
return "Ready for business!";
} else {
return "Production is halted!";
}
})
});


services/business-validator.js:

import Ember from 'ember';

export default Ember.Service.extend({
init() {
this._super(...arguments);
},
validate(business) {
let validMarkets = this.validateTargetMarkets(business);
let validChosenProduct = this.validateChosenProduct(business);
let validSuppliers = this.validateRequiredSuppliers(business);
let validPrice = this.validatePrice(business);
let validWorkers = this.validateWorkers(business);
let validLocations = this.validateLocations(business);
if (validMarkets && validChosenProduct && validSuppliers && validPrice && validWorkers && validLocations) {
return true;
} else {
return false;
}
},
validateTargetMarkets(business) {
if (business.get("targetMarkets") && business.get('targetMarkets').get('length') > 0) {
return true;
} else {
return false;
}
},
validateChosenProduct(business) {
if (business.get("chosenProduct")) {
return true;
} else {
return false;
}
},
validateRequiredSuppliers(business) {
let result = false;
if (business.get("chosenProduct") && business.get("chosenProduct").get("requiredResources") && business.get("chosenProduct").get("requiredResources").length > 0) {
result = business.get("chosenProduct").get("requiredResources").every(function(item) {
if (item.get('chosenSupplier')) {
return true;
} else {
return false;
}
});
}

if (result) {
return true;
} else {
return false;
}
},
validatePrice(business) {
if (business.get('chosenProduct') && business.get('chosenProduct').get('price') && business.get('chosenProduct').get('price') > 0) {
return true;
} else {
return false;
}
},
validateWorkers(business) {
if (business.get('workers') && business.get('workers').get('length') > 0) {
return true;
} else {
return false;
}
},
validateLocations(business) {
if (business.get('locations') && business.get('locations').get('length') > 0) {
return true;
} else {
return false;
}
}

});


Ember version:

Ember : 2.5.1
Ember Data : 2.5.2
jQuery : 2.2.3


Thanks for any help!

Lux Lux
Answer

Well, actually your code should work. Checkout this twiddle.

So your problem is not related to the code you posted.

Maybe you don't use the latest ember version?

Also if you show us your code or a not working twiddle we can tell you more, but for this question everything is working.