Bind JSON data to sap.m.Select inside sap.m.Table

0
votes

I am new to SAPUI5 development and I am stuck at a point where I have nested JSON data returned from server in which I want to bind the data to select list which is inside a table. But data is not binding to select.

Screenshot

Returned JSON data is like this :

{"KEY":[
  {
  "SYSTEM_ID":"BHD",
  "TCODE":"SM66",
  "SHIFT_ID":"A",
  "SHIFT_DATE":"20141121",
  "USER_ID":"NISHANT_T",
  "PARA_VAL":"3",
  "INFO_CHARNUM":"TEST",
  "INFO_UNIT":"",
  "INFO_DATE":"20141121",
  "INFO_TIME":"142345",
  "ATTACH_ID":[
  {
  "ID":"A"
  },
  {
  "ID":"B"
  },
  {
  "ID":"C"
  }
  ],
  "NOTES":"DOC",
  "MESSAGE":""
  }]}

I want to bind ATTACH_ID data to select. Code for view file is:

items: {
         path: "/KEY",
         template: new sap.m.ColumnListItem({
          type:  sap.m.ListType.Active,
           cells: [

                   new sap.m.Label({
                     text : "{SYSTEM_ID}"  //
                 }),

                 new sap.m.Label({
                     text : "{SHIFT_ID}"  //
                 }),

                 new sap.m.Label({
                     text : "{SHIFT_DATE}"  //
                 }),
                 new sap.m.Select({
                  path:"{/ATTACH_ID}",
                  items: [
                          new sap.ui.core.Item({
                          key:"{ID}",
                          value:"{ID}"
                          }) 
                         ]
                 }),




         ]

         })
    }

Don't Know how to do this. Data is binding to table correctly but not to select. Please suggest the right way of doing it. Thanks.

1
sapui5
try removing the / from path:"{/ATTACH_ID}", to path:"{ATTACH_ID}", - herrlock
Yes herrlock my problem is solved. Here is the solution : jsbin.com/kipese/9/edit?html,output. The problem was in the path. Correct path should be 'ATTACH_ID'. Thanks for the help. - Nishant

1 Answers

1
votes

I have done this my self with testing

onInit: function() {
     debugger;

    var data = [
                {name:"sankar",  name2:"kumar",  age:"20",value:false},
                {name:"sathis",  name2:"kumar",  age:"22",value:true},
                {name:"arun",  name2:"kumar",  age:"24",value:true},
                {name:"siva",  name2:"kumar",  age:"26",value:false}];
    var gender = [{gen:" "},
                  {gen:"Male"},
                  {gen:"Female"}];  //select//
    var oModel = new sap.ui.model.json.JSONModel();
         oModel.setData({
            sex     : gender,    
            rows    : data
        });   //select:sex//
            sap.ui.getCore().setModel(oModel);
             var oItemSelectTemplate = new sap.ui.core.Item({  
                    key : "{gen}",  
                    text : "{gen}"  
                });  //select-items//
    var opan =  this.getView().byId("panel");
    var otab = new sap.m.Table("items", {
            inset: true,
            columns : [
                new sap.m.Column({
                    styleClass : "name",
                    hAlign : "Left",
                    header : new sap.m.Label({
                        text : "name"
                    })     }),
                new sap.m.Column({
                    styleClass : "name",
                    hAlign : "Left",
                    header : new sap.m.Label({
                        text : "name2"
                    }) }),
                    new sap.m.Column({
                        styleClass : "gender",
                        hAlign : "Left",
                        header : new sap.m.Label({
                            text : "gender"
                        })}),
                    new sap.m.Column({
                        styleClass : "name",
                        hAlign : "Left",
                        header : new sap.m.Label({
                            text : "status"
                        })

                })
            ],

        });

//  otab.setBackgroundDesign("Transparent");

    var template = new sap.m.ColumnListItem({
        type : "Navigation",
        cells : [
            new sap.m.Input({
                value : "{name}"
            }),
            new sap.m.Input({
                value : "{name2}"
            }),
            new sap.m.Select("select",{


            }),   //select//
            new sap.m.CheckBox({
                selected : "{value}"
            })

        ]
    });
 sap.ui.getCore().byId("select").bindAggregation("items","/sex",oItemSelectTemplate);  //select-binding//


otab.bindItems("/rows", template);
 opan.addContent(otab);