cancel
Showing results for 
Search instead for 
Did you mean: 

error in binding JSON in SAPUI5 blank screen

former_member222346
Participant
0 Kudos

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);
	}
});


Accepted Solutions (0)

Answers (2)

Answers (2)

Sharathmg
Active Contributor
0 Kudos

Typo - Model1 instead of model1.

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

Regards,

Sharath

former_member222346
Participant
0 Kudos

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);
	}
});
junwu
Active Contributor
0 Kudos
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.

former_member222346
Participant
0 Kudos

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

Sharathmg
Active Contributor
0 Kudos

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

mantrishekar
Active Participant
0 Kudos

Below this line

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

add

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

and see what it is returning in console.