cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

No JSON data displayed in Table

Go to solution
timkudla
Participant

on ‎08-16-2016 10:51 AM

0 Kudos

Hey,

I try to use a table with JSON data, but my table is still after few attempts (using examples from internet) empty.

I hope you can find my mistake(s)

Here is my code:



<!DOCTYPE html>


<html>


<head>


       <meta http-equiv="X-UA-Compatible" content="IE=edge">


       <meta charset="utf-8">


       <title>Rechtschreibprüfung</title>


       <script


            id="sap-ui-bootstrap"


            src="https://cloudportaltrial-p1941901642trial.hanatrial.ondemand.com/ui5-dist/resources/sap-ui-core.js"


            data-sap-ui-theme="sap_bluecrystal"


            data-sap-ui-libs="sap.m"


            data-sap-ui-compatVersion="edge"


            data-sap-ui-preload="async"


            data-sap-ui-xx-bindingSyntax="complex"


            data-sap-ui-resourceroots='{


                 "sap.ui.demo.wt": "./"


            }'>


       </script>




       <link rel="stylesheet" type="text/css" href="style.css">




       <script>


            sap.ui.getCore().attachInit(function () {


            sap.ui.xmlview({


            viewName: "sap.ui.demo.wt.view.App"


                 }).placeAt("content");


            });


       </script>


</head>


<body class="sapUiBody" id="content">


    


</body>


</html>





<mvc:View


  controllerName="sap.ui.demo.wt.controller.App"


  xmlns="sap.m"


  xmlns:mvc="sap.ui.core.mvc"


  xmlns:l="sap.ui.layout"


  xmlns:core="sap.ui.core">


       <l:VerticalLayout width="100%" >


            <l:content>


                 <Button


                      text="Prüfung"


                      press="checkText"


                      id = "startButton"


                      width = "auto"


                      class="sapUiResponsiveMargin">


                 </Button>


                 <Panel class="sapUiResponsiveMargin" width = "auto" id="panel2">


                      <headerToolbar>


                           <Toolbar>


                                <Title level="H2" text="Vorschläge" />


                           </Toolbar>


                      </headerToolbar>


                      <Table id="suggestionTable" items="{path:'/suggestionData'}">


                         <columns>


                             <Column>


                                 <Label text="Wort"></Label>


                             </Column>


                             <Column>


                                 <Label text="Vorschläge"></Label>


                             </Column>


                         </columns>


                         <items>


                             <ColumnListItem>


                                 <cells>


                                     <ObjectIdentifier title="{WORD}" text="{WORD}"></ObjectIdentifier>


                                 </cells>


                                      <Text text="{SUGGESTION}"></Text>


                             </ColumnListItem>


                         </items>


                      </Table>


                </Panel>


            </l:content>


       </l:VerticalLayout>


</mvc:View>





sap.ui.define([


  "sap/ui/core/mvc/Controller",


  "sap/m/MessageToast"


], function(Controller, MessageToast) {


  "use strict";


  return Controller.extend("sap.ui.demo.wt.controller.App", {


  checkText: function() {


  var here = this;


  here.getWhitelist();


  here.getCorrections();


  here.createSuggestionTable();


  },


  createSuggestionTable: function() {


  var oData={


         suggestionData:[{


             'WORD':"test1",


             'SUGGESTION':"...test..."


         },{


             'WORD':"test2",


             'SUGGESTION':"...test..."


         }]


  };


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


            demoJSONModel.setData(oData);


            sap.ui.getCore().getElementById("suggestionTable").setModel(demoJSONModel);


  }


  });


});

Thanks in advance

Tim

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

xu_xiang
Participant
‎08-16-2016 11:36 AM
0 Kudos

line 22: <Table  ... items="{/suggestionData}">

Show replies
Show replies
timkudla
Participant
‎08-16-2016 12:07 PM
0 Kudos

Thanks for the advice, but the table displays furthermore "No data"

xu_xiang
Participant
‎08-16-2016 12:26 PM
0 Kudos

OK, next try;)

You have to implement the method onInit() for your controller, e.g.

sap.ui.define(['sap/ui/core/mvc/Controller','sap/ui/model/json/JSONModel'],
     function(Controller, JSONModel) {
     "use strict";
     return Controller.extend("sap.ui.demo.wt.controller.App", {

     onInit: function () {
          var demoJSONModel = new sap.ui.model.json.JSONModel();
          var oData={
               suggestionData:[{  
                         'WORD':"test1",  
                         'SUGGESTION':"...test..."  
                    },{  
                         'WORD':"test2",  
                         'SUGGESTION':"...test..."  
                    }]  
               };  
          demoJSONModel.setData(oData);  
          this.getView().setModel(demoJSONModel);
     };
     });
});
timkudla
Participant
‎08-16-2016 12:41 PM
0 Kudos

It runs

Do you know how to update the data. For example if data change while execution and I want to display the current state?

xu_xiang
Participant
‎08-16-2016 1:36 PM
0 Kudos

The controller may look like this:

sap.ui.define(['sap/ui/core/mvc/Controller','sap/ui/model/json/JSONModel'],
     function(Controller, JSONModel) {
     "use strict";
     return Controller.extend("sap.ui.demo.wt.controller.App", {

     onInit: function () {
          this.model = new sap.ui.model.json.JSONModel({
               suggestionData:[]
          });
          this.getView().setModel(this.model);
     },

     checkText: function() {
          // this.getWhitelist();  
          // this.getCorrections();
          this.updateSuggestionData();  
     },  

     updateSuggestionData: function() {
          var aSuggections = [{  
                         'WORD':"test1",  
                         'SUGGESTION':"...test..."  
                    },{  
                         'WORD':"test2",  
                         'SUGGESTION':"...test..."  
                    }];
          this.model.setProperty("/suggestionData", aSuggections);
     }

     });
});

AND your view: line 11 should be (start with dot)

press=".checkText"

Answers (1)

Answers (1)

agentry_src
Active Contributor
‎08-16-2016 2:18 PM
0 Kudos

Discussion successfully moved from SAP HANA Cloud Platform Developer Center to SAPUI5 Developer Center

as the more appropriate community for this question and status reset to Not Answered from Assumed Answered (which should not be used).

Regards, Mike (Moderator)

SAP Technology RIG

Show replies
Show replies
Ask a Question