CODEWITHSUNDEEP
javascriptdata-bindingsapui5sap-fiori
haris
haris

Reputation: 119

SAPUI5 Can't access a array and give it to a JSONModel

I have problems to access an array, where i put some data from a omodel read. The array is called aData und contains row data for a table. This works fine, all data is in there.

This all code is done after a value help dialog is opened and in his/this table i want to put the data

        var oTestModel = this.getModel();
        oTestModel.read("/shrhelpSet", {
            filters: [oFilterObject, oFilterField, oFilterLang],
            success: function(oRetrieveResults){
                //console.log(oRetrieveResults);

                var oDatas2 = oRetrieveResults;
                var test1 = oDatas2.results;

                var aData = [];
                var index = oDatas2.results.length;
                var i;
                for (i=0; i<index; i++) {       

                    aData.push("{Key: '" + oDatas2.results[i].key + "', Value: '" + oDatas2.results[i].value + "'}");
                }

                // aData Array  
                console.log("aData: " + aData);

            },

            error: function(oError){
                console.log(oError);
            }
        });

This code is after the omodel read. Here i have an array with column data for my table. The oModel2 contains the columndata, which i definded in aColumnData and the rows from above are in aData. And here is the problem. It returns (the array) no data or is showing only object. Do you have tipps for better handling this or a solution for this problem?

        var aColumnData = [{
            columnId: "Key"
        }, {
            columnId: "Value"
        }];

        var oModel2 = new sap.ui.model.json.JSONModel();

        oModel2.setData({
            columns: aColumnData,
            rows: aData // THIS IS THE RESULT OF MY MODEL, the results are in aData but i cant access it here
        });

        oTable.setModel(oModel2);

        oTable.bindColumns("/columns", function(index, context) {
            var sColumnId = context.getObject().columnId;
            return new sap.ui.table.Column({
                id : sColumnId,
                label: sColumnId,
                template: sColumnId
            });
        });
        oTable.bindRows("/rows");

Upvotes: 1

Views: 4667

Answers (3)

Voyager
Voyager

Reputation: 840

Try to move the code that needs access to the received data into the success handler like this. Also, I think the other answer is right that you need to create objects instead of strings.

this.getModel().read("/shrhelpSet", {
filters: [oFilterObject, oFilterField, oFilterLang],
success: function (oRetrieveResults) {
    var aData = oRetrieveResults.results.map(function (oResult) {
        return {
            Key: oResult.key,
            Value: oResult.value
        };
    });

    var aColumnData = [{
        columnId: "Key"
    }, {
        columnId: "Value"
    }];

    var oModel = new sap.ui.model.json.JSONModel({
        columns: aColumnData,
        rows: aData
    });

    oTable.setModel(oModel);

    oTable.bindColumns("/columns", function (index, context) {
        var sColumnId = context.getObject().columnId;
        return new sap.ui.table.Column({
            id: sColumnId,
            label: sColumnId,
            template: sColumnId
        });
    });

    oTable.bindRows("/rows");
}.bind(this),

error: function (oError) {
    console.log(oError);
}
});

Upvotes: 1

Cmdd
Cmdd

Reputation: 897

I think that the problem could be that you are pushing strings and not objects in your array:

aData.push("{Key: '" + oDatas2.results[i].key + "', Value: '" + oDatas2.results[i].value + "'}");

Your object should be something like this:

{
   Key: oDatas2.results[i].key,
   Value: oDatas2.results[i].value
}

Upvotes: 2

D. Seah
D. Seah

Reputation: 4592

There are no problem with your view.

var oTable = new sap.ui.table.Table({
  rows: '{/rows}',
  title: new sap.m.Title({
    text: "Test"
  })
});

oTable.bindColumns("/columns", function(index, context) {
  var sColumnId = context.getObject().columnId;
  return new sap.ui.table.Column({
    label: sColumnId,
    template: sColumnId
  });
});

var model = new sap.ui.model.json.JSONModel({
  columns: [{
    columnId: "Key"
  }, {
    columnId: "Value"
  }],
  rows: [
    { Key: "K1", Value: "V1" },
    { Key: "K2", Value: "V2" },
  ] 
});

oTable.setModel(model);
oTable.placeAt('content');
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m" 
            data-sap-ui-xx-bindingSyntax="complex"
            data-sap-ui-theme="sap_belize"></script>	
  </head>
  <body id="content" class="sapUiBody sapUiSizeCompact">
  </body>
</html>

So it appears that your model is incorrect. Maybe you are trying to change the results in the model like this.

success: function(oRetrieveResults){
    var aData = oRetrieveResults.results.map(function(data) {
        return {
            Key: '"' + data.key + '"',
            Value: '"' + data.value + '"'
        };
    });
    this.setProperty("/results", oData);
},

Upvotes: 0

Related Questions