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: 

Issue with app when binding JSON?

Go to solution
former_member599797
Explorer

on ‎01-08-2019 2:28 PM

Hello All,

I have just begun to learn SAPUI5, I am going with SAPUI5 book from SAPPRESS and have issue at the beginning with one part. In chapter 4 about MVC tere is a simple APP, that I am unable to run. It should take data from JSON object in the same file and present it in table. I can not figure out why it does not work...

Would appreciate any help,

Thanks!

<!DOCTYPE HTML>
<html>


	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta charset="UTF-8">


		<title>testapp</title>


		<script id="sap-ui-bootstrap"
			src="../../resources/sap-ui-core.js"
			data-sap-ui-async="true"
			data-sap-ui-libs="sap.m,sap.ui,sap.ui.core"
			data-sap-ui-theme="sap_belize"
			data-sap-ui-compatVersion="edge"
			data-sap-ui-resourceroots='{"testapp.testapp": "./"}'>
		</script>


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


		<script>
	var oData={
		"CountSuppliers" :"2",
		"Suppliers":[
			{
				"ID":0,
				"Name":"Exotic Liquids",
				"Address":{
					"Street":"NE 228th",
					"City":"Sammamish",
					"State":"WA",
					"ZipCode":"98074",
					"Country":"USA"
				}
			},
			{
				"ID":1,
				"Name":"Tokyo Traders",
				"Address":{
					"Street":"NE 40th",
					"City":"Redmond",
					"State":"WA",
					"ZipCode":"98052",
					"Country":"USA"
				}
			}
		]
	};
	var oModel = new sap.ui.model.json.JSONModel();
// set the data for the model
	oModel.loadData(oData);
// set the model to the core
	sap.ui.getCore().setModel(oModel);
	
	var aColumns = [
		new sap.m.Column({
			header: new sap.m.Text({
				text: "ID"
			})
		}),
		new sap.m.Column({
			header: new sap.m.Text({
				text: "Name"
			})
		})
	];
	
	var oTemplate = new sap.m.ColumnListItem({
		type: "Navigation",
		cells: [
			new sap.m.ObjectIdentifier({
				text: "{ID}"
			}),
			new sap.m.ObjectIdentifier({
				text: "{Name}"
			})
		]
	});
	
	var oTableHeader = new sap.m.Toolbar({
		content: [
			new sap.m.Title({
				text: "Number of suppliers: {/CountSuppliers}"
			})
		]
	});
	
	var oTable = new sap.m.Table({
		columns: aColumns,
		headerToolbar: oTableHeader
	});
	
	oTable.bindItems("/Suppliers", oTemplate);


	var oPageMaster = new sap.m.Page("masterPage", {
		title: "Supplier Overview",
		content: [oTable]
	});
	
	var oApp = new sap.m.App("myApp");
	oApp.addPage(oPageMaster);
	oApp.placeAt("content");


		</script>
	</head>


	<body class="sapUiBody" role="application" >
		<div id="content"></div>
	</body>
</html>
Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

boghyon
Product and Topic Expert
Product and Topic Expert
‎01-08-2019 2:35 PM

It should be setData instead of loadData:

oModel.setData(oData);
The loadData API awaits a URL as argument whereas setData awaits a JS object / array.

Other issues:

  1. In data-sap-ui-libs="sap.m,sap.ui,sap.ui.core", the "sap.ui" part is incomplete. Please remove that part or enhance it with ".layout" --> "sap.m, sap.ui.layout, sap.ui.core".
  2. Depending on the environment, the path to load UI5 resources from could be also invalid. In this case, try with src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" instead.
  3. Since the libraries and modules are loaded asynchronously (data-sap-ui-async="true"), trying to instantiate modules via global references would probably cause another issue: "new sap.something.SomeModule()" --> "sap.something" is undefined! Please make sure to require those modules beforehand and to use the given function parameters instead. See the documentation topic Best Practices for Loading Modules.

To sum it up:

<!DOCTYPE HTML>
<html style="height: 100%;">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title>testapp</title>
    <script id="sap-ui-bootstrap"
      src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-async="true"
      data-sap-ui-libs="sap.m, sap.ui.core"
      data-sap-ui-theme="sap_belize"
      data-sap-ui-compatversion="edge"
      data-sap-ui-resourceroots='{"testapp.testapp": "./"}'
    ></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script>
      sap.ui.getCore().attachInit(function() {
        sap.ui.require([
          "sap/ui/model/json/JSONModel",
          "sap/m/Column",
          "sap/m/Text",
          "sap/m/ColumnListItem",
          "sap/m/Toolbar",
          "sap/m/Title",
          "sap/m/Table",
          "sap/m/Page",
          "sap/m/App"
        ], function(JSONModel, Column, Text, ColumnListItem, Toolbar, Title, Table, Page, App) {
          "use strict";

           var oData = {/*...*/};
           var oModel = new JSONModel();
           oModel.setData(oData);

           // ...
        });
      });
    </script>
  </head>
  <body class="sapUiBody">
    <div id="content"></div>
  </body>
</html>
Show replies
Show replies
former_member599797
Explorer
‎01-08-2019 3:03 PM
0 Kudos

Hi Boghyon,

thanks, I have changed that, but no effect. There is something else that must be broken.

boghyon
Product and Topic Expert
Product and Topic Expert
‎01-08-2019 3:48 PM
0 Kudos

iscario Are there any errors in the browser console? I just found another issue and updated my answer

former_member599797
Explorer
‎01-09-2019 7:25 AM
0 Kudos

Hello Boghyon,

thanks, it helped me a lot! I had an issue where async was not loading libraries on time, thanks to your answer I managed to fix it.

I had some other issues but I managed to fix them too.

BR,

Lucas

Answers (0)

Ask a Question