CODEWITHSUNDEEP
sapui5
P.D bhai
P.D bhai

Reputation: 3

App fails to fetch JSON resources from my project folder

I want to display a simple table using XML views. I have a model which is loading the data from a JSON file. I am using 'sap.ui.table' and 'sap.m' class. The problem is I am unable to fetch the data onto the view. I think I am missing something with binding or loading the libraries or maybe in the bootstrap code.

Note: Look for the binding in the view:

Below are the code snippets :

1) Data.json

{
"empstr":

           {
		"eId": 100,
		"eName": "Prathamesh",
		"eSalary": 2400,
		"currency": "INR"
	},


	"empTab": [{
			"eId": 100,
			"eName": "Prathamesh",
			"eSalary": 2400,
			"currency": "INR"


		}, {
			"eId": 200,
			"eName": "Prateek",
			"eSalary": 2500,
			"currency": "USD"
		}, {
			"eId": 300,
			"eName": "Simar",
			"eSalary": 1200,
			"currency": "INR"
		}, {
			"eId": 400,
			"eName": "Sahil",
			"eSalary": 1350,
			"currency": "EUR"
		}, {
			"eId": 500,
			"eName": "Sakshi",
			"eSalary": 500,
			"currency": "USD"
		}, {
			"eId": 600,
			"eName": "Soumya",
			"eSalary": 12000,
			"currency": "INR"
		}, {
			"eId": 700,
			"eName": "Laxman",
			"eSalary": 240000,
			"currency": "INR"
		}


	]


}

2) Main.view.xml

<mvc:View xmlns:core="sap.ui.core" 
		  xmlns:mvc="sap.ui.core.mvc" 
		  xmlns="sap.m" 
		  xmlns:table="sap.ui.table"
		  controllerName="akhil.controller.Main"
	      xmlns:html="http://www.w3.org/1999/xhtml">
	
	 <table:Table id="myTab1"
	              selectionMode= "None" 
	              rows="{/empTab}">
      <table:title>
      	<Text text="Table header"></Text>
      </table:title>
            <table:columns>
            	
              <table:Column>
                <table:label>
                	<Label text = "Emp Id"></Label>	
                </table:label> 
                <table:template>
                	<Text text="{eId}"></Text>
                </table:template>
              </table:Column>
              
              
              <table:Column>
                <table:label>
                	<Label text = "Emp Name"></Label>	
                </table:label> 
                <table:template>
                	<Text text="{eName}"></Text>
                </table:template>
              </table:Column>
              
              
              <table:Column>
                <table:label>
                	<Label text = "Emp Salary"></Label>	
                </table:label> 
                <table:template>
                	<Text text="{eSalary}"></Text>
                </table:template>
              </table:Column>
              
              
              <table:Column>
                <table:label>
                	<Label text = "Currency"></Label>	
                </table:label> 
                <table:template>
                	<Text text="{/empTab/currency}"></Text>
                </table:template>
              </table:Column>
            </table:columns>   
          </table:Table>

</mvc:View>

3) Main.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";


	return Controller.extend("akhil.controller.Main", {

		onInit: function () {
			
			var oModel = new sap.ui.model.json.JSONModel();
			oModel.loadData("/ExerciseBinding/Data.json");
			this.getView().setModel(oModel);
			
		}

	});


});

4) myhtml.html

<!DOCTYPE html>
<html>
	<head>
		<script id="sap-ui-bootstrap"		
		       	src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
				data-sap-ui-libs="sap.m, sap.ui.table"
				data-sap-ui-theme="sap_bluecrystal"
				data-sap-ui-bindingsyntax="complex"
				data-sap-ui-resourceroots='{
					"akhil": "./"
					}'
					>
					
		</script>	
	
		<script>
			var oView = new sap.ui.view({
				id:"idMain3",
				viewName:"akhil.view.Main",
				type: "XML"
			});

			oView.placeAt("XMLcontent"); 
		</script>
</head>
	
	<body class="sapUiBody">          
		<div id="XMLcontent"> 
		</div>
		</body>
</html>

5) Error shown in image below.

Error

I am missing out something but can't figure out exactly what. I appreciate your feedback. The data is not getting populated on the view.

Upvotes: 0

Views: 1285

Answers (2)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18044

Whenever creating a relative path to reference a resource, make use of the API sap.ui.require.toUrl:

// Given data-sap-ui-resourceroots='{ akhil: "./" }'
const realPath = sap.ui.require.toUrl("akhil/ExerciseBinding/Data.json"); // "./ExerciseBinding/Data.json"
oMyJSONModel.loadData(realPath);

Check the API description for more information.

Upvotes: 0

Bernard
Bernard

Reputation: 1238

Your app cannot find your model data file - whence the 404. Your line of code below will cause your ui5 app to look in the root of the web server you are serving from:

oModel.loadData("/ExerciseBinding/Data.json");

E.g. the above would look in, say, http://<yourserverbaseurl>/ExerciseBinding/Data.json This is unlikely to be where you have located the app and the json file itself.

Check the network tab on the Chrome Developer Tools to see where your app is actually looking vs. where they actually are on your web server.

Upvotes: 1

Related Questions