How to get property of a JSONModel in my Controller? [duplicate] - sapui5

Question

This question already has answers here:
How to get model on onInit?
(2 answers)
Closed 4 years ago.
I need to retrieve the property of my JSONModel in my controller.
The scenario is as follows:
I have a "questionnaire" model (questionnaire.json) which contains questions and answers. Then I have a controller (App.controller.js).
In this controller, I have created one more model in onInit with the name "currentQuestion" because I need to implement a scenario where the next question should be loaded when the user clicks on the next button.
I am trying to get the property of my "questionnaire" model but I am facing an error:
Cannot read property of 'getProperty' of undefined.
You can see the model data and my controller here:
questionnaire.json
{
"data": [{
"question": "Which pet do you like from the following?",
"answers": ["Cats", "Rabbits", "Dogs", "Hamsters"],
"correct": 1
}, {
"question": "Which pet do you prefer from the following?",
"answers": ["Cats", "Dogs"],
"correct": 1
}, {
"question": "What food brand does your pet eat?",
"answers": ["Pedigree", "Catfood", "Rabbitfood", "HamstersFood"],
"correct": 1
}]
}
App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel){
Controller.extend("opensap.onlinequestionnaire.controller.App", {
onInit: function() {
this.questionSetUp();
this.getView().setModel(new JSONModel({
index: false,
question: {}
}), "currentQuestion");
var oCurrentQuestionModel = this.getView().getModel("currentQuestion");
var oQuestionModel = this.getView().getModel("questionnaire");
var iCurrentIndex = oCurrentQuestionModel.getProperty("/index");
var oQuestion = oQuestionModel.getProperty("/data/0/question");
console.log(oQuestion);
console.log(iCurrentIndex);
iCurrentIndex = iCurrentIndex ? ++iCurrentIndex : 0;
console.log(iCurrentIndex);
}
});
});
When I try to question property in oQuestion, it throws me the error. How do I get the 0th element's question property's value?

Answer 1

One more thing I was doing wrong was I was trying to get this model in init. [src]
Unfortunately yes. That was actually the main reason why the model was undefined in this case. But not because the model was not loaded.
We know from the documentation that models defined in the app descriptor (manifest.json) are set to the component and that those models get propagated to component's children. Hence, calling view.getModel from any controller should return the model seamlessly because it's set globally on the component. But: Something that is not obvious is that models set on the component cannot be retrieved in onInit of any Controller just by using the corresponding view because the view doesn't know its parent yet in that state. Calling view.getParent in onInit returns null. So the component model "questionnaire" was not propagated to your view yet. As you did it already, such component models can be easily retrieved in onInit by using the component instead of the view: this.getOwnerComponent().getModel("modelName") and the error
Cannot read property of 'getProperty' of undefined
is gone.

Answer 2

the method setModel(oModel, sName?) sets a model to your view. In your code you set a Model with the name "currentQuestion" to the view which contains the data from the questionnaire.json file. You get this model in the variable oCurrentQuestionModel.
Please try to get the property from this model by the following code:
oCurrentQuestionModel.getProperty("/data/0/question");
In your code snippet it is not clear where oQuestionModel is defined.

Answer 3

In your case. I think you should change
var oQuestionModel = this.getView().getModel("questionnaire");
to
var oQuestionModel = this.getView().getModel();
because you did not name your model so that it becomes the default model.