CODEWITHSUNDEEP
sapui5
loki
loki

Reputation: 648

Why do I get No data in my list items?

I am trying to use a List control and bind the data to it from a json model. I am getting the initial property from my json model to display in my List as follows :

<List headerText = "{/question}" ></List>

But then my json model also has a collection of answers which consist of answerText property. You can see this model in my controller as below in App.controller.js.

Problem: Whenever I try to load the page the headerText is displayed from the text stored in json model but instead of displaying the collection in my list it says no data.

Kindly check my code and give me an appropriate solution.

App.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core"
displayBlock="true" controllerName="opensap.examples.controller.App" height="100%">
<Page title="List Page">
    <content>
       <List headerText="{/question}" id="myList" items="{ path: '/answers' }">
            <items>
                <InputListItem label="{answerText}">
                    <CheckBox></CheckBox>
                </InputListItem>
            </items>
        </List>
        <Button press="load" text="Click Me"></Button>
    </content>
</Page></mvc:View>

App.controller.js

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"], function(Controller, JSONModel) {

var oData = {
    "question": "Which pet do you like from the following?",
    "answers": [{
        "answerText": "Cats"
    }, {
        "answerText": "Rabbits"
    }, {
        "answerText": "Dogs"
    }, {
        "answerText": "Hamsters"
    }]
};

var oModel;

Controller.extend("opensap.examples.controller.App", {

    onInit: function() {
        oModel = new JSONModel();
        oModel.setData(oData);
        this.getView().setModel(oModel);
},
    load: function() {  
        console.log(oModel);
    }

});
});

Output: output

Upvotes: 0

Views: 1341

Answers (1)

Sri ram
Sri ram

Reputation: 90

Please try following changes, it may help you

In Controller,

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
this.getView().setModel(oModel, "myModel");

In xml view,

 <List headerText="{myModel>/question}" id="myList" items="{ path: 'myModel>/answers' }">
    <items>
        <InputListItem label="{myModel>answerText}">
        <CheckBox></CheckBox>
        </InputListItem>
   </items>
</List>

Upvotes: 0

Related Questions