Skip to Content
Author's profile photo Rajvardhan Thakare

How to read data using AJAX call

Hi  All,

In this blog I am going to tell you how to read data through AJAX calls.

Imagine that you want to use the data from some other site to your app .

Suppose you want to show news feeds in your app or you want to access some internet oData service like Northwind in your appSo one of the solution to your need is AJAX call.

So in this blog I am going to discuss :

1.Read XML data using AJAX (News feeds on this site : http://zeenews.india.com/rss/world-news.xml)

2.Read Northwind oData using AJAX (oData on this site: http://services.odata.org/V2/Northwind/Northwind.svc/Customers)

 

1.Read XML data using AJAX

Step 1: Create destination for the site (Not absolute URL)

 

Step 2: Make the destination entry in neo-app.json

{
"path": "/zeenews",
"target": {
"type": "destination",
"name": "zeenews"
},
"description": "News Feedservice"
}

Step 3: AJAX call .

First two steps just bring the data at the same domain.In this step you are actually going to call the URL and fetch the data into the model

var oModel = new sap.ui.model.xml.XMLModel();
var that = this;

var aData = jQuery.ajax({
type: "GET",
contentType: "application/xml",
url: "/zeenews/rss/world-news.xml",
dataType: "xml",
async: false,
success: function(data, textStatus, jqXHR) {



;
oModel.setData(data);

alert("success to post");
}

});

this.getView().setModel(oModel);​
Now you have all the XML data  of the destination site in your default model .
You can access the data of any XML tag simply by using following code:
this.getView().getModel().oData.getElementsByTagName(“<Tag Name>”)

 

 

2..Read Northwind oData using AJAX

Yess, you can use the Northwind oData using AJAX call .

First two steps(“Create destination for the site” and ” Make the destination entry in neo-app.json”) are similar for Northwind.

 

Step 1: Create destination for the site

 

Step 2 :  Make the destination entry in neo-app.json

 

{
"path": "/Northwind_New",
"target": {
"type": "destination",
"name": "Northwind_New"
},
"description": "wind connector"
}

 

Step 3: AJAX call.

I have used JSON model to access the Northwind oData.

onInit: function()
{
var oModel = new sap.ui.model.json.JSONModel();
var that = this;
var aData = jQuery.ajax({
type: "GET",
contentType: "application/json",
url: "/Northwind_New/V2/Northwind/Northwind.svc/Customers",
dataType: "json",
async: false,
success: function(data, textStatus, jqXHR) {
oModel.setData(data);
alert("success to post");
}
});
this.getView().setModel(oModel);
}
In this method the whole oData will come now be set to your default model.
If you want to see the records, you can use the following line of code in debugger.
oModel.getProperty(“/d/results”);
I have then set the data to my table on View 🙂
<Table id="idProductsTable" headerText="Comapany Info" class="sapUiResponsiveMargin" width="auto" items="{/d/results}">

.........


</Table>

This is it..
Do let me know if you like the blog
Thank you
🙂

 

 

 

Assigned Tags

      14 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Ankur Bajpai
      Ankur Bajpai

      Nice blog Raj.

      Regards,

      Ankur

      Author's profile photo Rajvardhan Thakare
      Rajvardhan Thakare
      Blog Post Author

      Thanks Ankur

       

      Author's profile photo Cristian Babei
      Cristian Babei

      Nice blog!

      One question, this is usefull only when you deploy on your SCP, as you are using destinations, how  would you do, if you will deploy the app to your OnPremise gateway¿?

      Author's profile photo Rajvardhan Thakare
      Rajvardhan Thakare
      Blog Post Author

      Hi,

      Just try one thing , don't create destination instead of that write the complete url in "url" section

      Like,

      url:"https://example.com/abc.xml"

      And make async true

      Like,

      async:true

       

       

      Try this thing and do let me know

      🙂

      Author's profile photo Cristian Babei
      Cristian Babei

      When trying this, I always have CORS problems...

      Author's profile photo Rajvardhan Thakare
      Rajvardhan Thakare
      Blog Post Author

       

      	$.ajax({
      			type: "POST",
      			url: url,
      			dataType: "json",
      			crossDomain: true,
      			data: JSON.stringify(myEventList),
      			success: function(result) {
      				
      			},
      			error: function(response) {
      						}
      		});

      Try this and let me know

      Author's profile photo Abhilash G
      Abhilash G

      Hi Rajvardhan,

       

      Can we create destinations in Eclipse Mar2.0?

       

       

      Author's profile photo Özkan YILMAZ
      Özkan YILMAZ

      Hi Rajvardhan Thakare , firstly thanks for this useful blog post.

      I’m also taking same CORS problem like  Cristian Babei .

      Do you have any idea?

      Code is here;

                        var url = "http://<URL>.com:<PORT>/api/startanalysis"; 
        
                          $.ajaxSetup({
      				headers: {
      					'Content-Type': 'application/json'
      				}
      			});
      
      			jQuery.ajax({
      				url: url,
      				type: "POST",
      				data: $.param({
      					"InputMaterial": "1111",
      					"SimilarityType": "R",
      					"TOP": 5,
      					"Id": id,
      					"Parameters": [{
      						"Parameter": "Merkmal4",
      						"Weight": 100,
      						"Knockout": false
      					}]
      				}),
      				crossDomain: true,
      				dataType: "json", 
      				async: false,
      				//contentType: "application/json",
      				success: function (data) {
      					debugger;
      					MessageToast.show("Done");
      				},
      				error: function (e) {
      					MessageToast.show("Server Send Error");
      				}
      			});

       

      Author's profile photo Shivakumar Honyal
      Shivakumar Honyal

      Great blog.

      TIP: Always make destination to avoid CORS header issue.

      Author's profile photo Dravin Sengupta
      Dravin Sengupta

      Hi Rajvardhan,

      Instead of creating a new model, I'm trying to set a property in my global model to store the fetched data. But the property remains empty. Can you suggest how to resolve it?

      Here is the code:

      var oDataGlobalModel = this.getOwnerComponent().getModel("oDataGlobal");
                  var sUrl = "/Department_Service/rmg/departments";
                  debugger;
                  $.ajax({
                  	type: "GET",
                  	url: sUrl,
                  	async: true,
                  	dataType: "json",
                  	contentType: "application/json; charset=utf-8",
                  	error: function (err) {
      					sap.m.MessageToast.show("Destination Failed");
      				},
                  	success: function(data, textStatus, jqXHR){
                  		oDataGlobalModel.setProperty("/departmentData",data);
                  		sap.m.MessageToast.show("Success to fetch department data");
                  	}
                  	
                  });
                  oDataGlobalModel.refresh();
      Author's profile photo Rajvardhan Thakare
      Rajvardhan Thakare
      Blog Post Author

      Hi,

      setProperty() method won't work with your odata model.

      Please create one json model at global level and try to set it to that model.

      Please replace your code with below code snippet  inside success call. I hope it will help.

      var jsonModel  = new sapui.model.json.JSONModel();
      
      jsonModel.setProperty("/departmentData",data);
      
      sap.ui.getCore().setModel(jsonModel,"departmentModel");

      This model will be created at global level.

      And you can access the model using below statement

      sap.ui.getCore().getModel("departmentModel");

       

      I hope it will help.

       

      Thanks

       

       

       

       

       

      Author's profile photo Sauranil Dey
      Sauranil Dey

      Hi Rajvardhan,

      Thank you for your blog post.

      I am using SAP BAS to generate my UI5 project using generators.

      I don't have any neo-app.json file.

      In such a case where do I define the destinations ? Is it manifest.json ?

      Regards,

      Sauranil

      Author's profile photo Juan David Forero
      Juan David Forero

      Hello, were you able to do the configuration in the manifest?

      Author's profile photo Rajat Jain
      Rajat Jain

      Hi Sauranil,

      You can define the destination in xs-app.json file of your project.