How to make synchronous Rest API call in SharePoint Online/2013/2016 using jQuery?

In this SharePoint tutorial, we will discuss how to make a synchronous Rest API call in SharePoint Online/2013/2016 site using jQuery. Normally when we do Rest API call using AJAX calls in SharePoint, it executed asynchronously. So it is not possible to know whether the call has been made completely or not. Sometimes you might come across a requirement where you want to execute something after the call has been made complete.

Here I will show 2 ways of Make synchronous Rest API call in SharePoint Online or SharePoint 2013/2016.

• Use then
• Use .done

Make synchronous Rest API call using .then function

By using “then” function we can make synchronous Rest API call.

In this below example I have an Announcement list which has few items in SharePoint online. By using the Rest API call we will try to retrieve items from the list. Here we have taken a div and we are binding the list data to div. We are calling like below:

getItems(fullUrl).then(getItemsSuccess, getItemsFail);

Here getItemsSuccess will be called once the rest API call over completely. To execute the code I have created a web part page and on that web part page, I have added a script editor web part.

Inside the script editor web part, I have added the below code. Make sure to give the jQuery reference.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<h1>Training Announcements</h1><br/>
<div id="result"></div>
<script>
jQuery().ready(function () {
var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('TrainingAnnouncements')/items?$select=ID,Title";
getItems(fullUrl).then(getItemsSuccess, getItemsFail);
})
function getItems(url){
return $.ajax({
url: url,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
}
});
}
function getItemsSuccess(data){
var fullresult="";
if(data.d.results.length > 0){
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
fullresult+=results[i].Title +'<br><br>';
}
jQuery('#result').html(fullresult);
}
else
{
jQuery('#result').text("No Data");
}
}
function getItemsFail(err){
alert("Some error occurred !!!");
}
</script>

Once you run the code, you can see the result like below:

Make synchronous Rest API call using .done Function:

Another approach is to make synchronous Rest API call in SharePoint, is by using .done function. Here by using .done we are retrieving the same list items. Like the above, we can add this code inside a script editor web part inside a web part page.

Full Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<h1>Training Announcements</h1><br/>
<div id="result"></div>
<script>
jQuery().ready(function () {
function getItems(url) {
return $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + url,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
}
});
}
getItems( "/_api/Web/Lists/GetByTitle('TrainingAnnouncements')/Items" ).done(function(data){
var fullresult="";
data.d.results.forEach(function(item){ // no need for oldskool for loops
fullresult+=item.Title +'<br><br>';
});
jQuery('#result').html(fullresult);
});
});
</script>

Read some SharePoint Rest API tutorials:

• Create, Update and Delete SharePoint List using Rest API in SharePoint 2013/2016/Online
• SharePoint Branding: Displaying dynamic contents into page using JavaScript and REST API in SharePoint online or SharePoint 2016/2013
• SharePoint Online Branding: Display List items into page using AngularJS and REST Api in SharePoint online or SharePoint 2016/2013
• Bind SharePoint Online List Data into HTML table or jQuery Datatable using jQuery and Rest API
• Rest API filter list items created by logged in user SharePoint Online/2013/2016
• Create custom announcement web part using Rest API in SharePoint Online/2013/2016
• Create SharePoint Quote of the day web part using Rest API and Bootstrap
• Display Task List data in a table using SharePoint REST API and filter by status column
• KnockoutJS SharePoint 2013 CRUD Operations using REST API

Once you run the code you can see the result like above. I hope this article will be helpful to make a synchronous Rest API call in SharePoint 2013/2016 or SharePoint online.