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 app
. So 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
🙂