Skip to Content
0

error in binding JSON in SAPUI5 blank screen

May 02, 2017 at 11:39 AM

71

avatar image
Former Member

Hi Friends,

I am trying to bind JSON model in my view but viewing a blank screen as output. Please check the below code and help where am I committing mistake.

index.html:

<!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="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-xx-bindingSyntax = "complex"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->


		<script>
				sap.ui.localResources("exercise2");
				var app = new sap.m.App({initialPage:"idView11"});
				var page = sap.ui.view({id:"idView11", viewName:"View1.View", type:sap.ui.core.mvc.ViewType.XML});
				app.addPage(page);
				app.placeAt("content");
		</script>


	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

View

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
		controllerName="View1.Controller" xmlns:html="http://www.w3.org/1999/xhtml">
	<Page title="Title">
		<content>
	
	<VBox>
		<HBox>
		<Text text = "{/Products/0/Price}"></Text>
		<Input id = "text" value = "{path: '/Products/0/Price' } "
				width = "100%"></Input>
		</HBox>
		
		<HBox>
		<Text text = "Last Name"></Text>
		<Input placeholder = "Enter last name: "
				width = "100%"></Input>
		</HBox>
		
		<Button text = "Press here"  press = "click"></Button>
	</VBox>
				
		</content>
	</Page>
</core:View>

Controller:
sap.ui.controller("View1.View", {
	
	onInit : function() {
		
		var Model1 = new sap.ui.model.json.JSONModel();
		model1.loadData("model/expense.json");
		sap.ui.getCore().setModel(Model1);
	}
});


10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Sharath M G May 02, 2017 at 02:29 PM
0

Typo - Model1 instead of model1.

Once the screen appears, check if the data is loaded into the variable Model1 in the debug.

Regards,

Sharath

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Sharath,

Thanks for the reply.

I have corrected my typo but still facing the same issue.

sap.ui.controller("View1.View", {
	
	onInit : function() {
		
		var model1 = new sap.ui.model.json.JSONModel();
		model1.loadData("model/expense.json",null,false);
		sap.ui.getCore().setModel(model1);
	}
});
0
Jun Wu May 02, 2017 at 02:13 PM
0
model1.loadData("model/expense.json",null,false);

put a debug point after this line to see if you have the data in the model.

most likely you don't have the data in model because of the path.

Show 3 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Jun Wu,

Thanks for the reply.

I tried the same but still facing the blank screen as output.

Request you to tell me how to put debug point after the line.

pasting expense.json file in model folder under Web content.

{
	"Product" : [
		{	
		
		"Product ID" : "123",
		"Price" : "321",
		"Product Name:" : "bag",
		"value" : "10",
		"Plant" : "Bags limited",
		"Status" : "available"
		}
	]
}		

Regards,

Sindhu

0

Below this line

model1.loadData("model/expense.json",null,false)

add

console.log(model1.getData().Product)

and see what it is returning in console.

0

Open the chrome debugger. On console tab, you will get the error why the screen is blank.

Check the link to learn on setting the breakpoint.

https://developers.google.com/web/tools/chrome-devtools/javascript/

Regards,

Sharath

0