Rest Api how to retrieve list items from SharePoint Online

We will learn how to call Rest Api in SharePoint Online, here is the requirment:

There is a customer list named "Customers", we will output the title of all items in the list.

Introduce Rest Api:

The request examples in this article assume that you’re using the cross-domain library (SP.RequestExecutor.js) to make cross-domain requests, so they useSP.AppContextSite in the endpoint URI. SeeHow
to: Access SharePoint 2013 data from apps using the cross-domain library for more information.



Note: make sure implement the sp.requestextcutor.js in page.

Implement in detail:

1. create a custom list

2. New a project in Napa, add a page and implement the js

'use strict';

var currentcontext;
var hostcontext;
var hostweb;
var hostUrl;
var appUrl;

(function() {

// This code runs when the DOM is ready and creates a context object which is
// needed to use the SharePoint object model
$(document).ready(function() {
hostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
currentcontext = new SP.ClientContext.get_current();
hostcontext = new SP.AppContextSite(currentcontext, hostUrl);
hostweb = hostcontext.get_web();
appUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

getListItems();
});

function getListItems() {
var executor = new SP.RequestExecutor(appUrl);
executor.executeAsync({
url: appUrl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('Customers')/getitems?@target='" + hostUrl + "'",
method: "POST",
body: "{ 'query' : {'__metadata': { 'type': 'SP.CamlQuery' }, 'ViewXml': '<View><Query><Where></Where></Query></View>' } }",
headers: {
"accept": "application/json; odata=verbose",
"content-type": "application/json; odata=verbose"
},
success: function(data, req, text) {
console.log(JSON.parse(data.body));
var result = JSON.parse(data.body).d.results;
for (var i = result.length - 1; i >= 0; i--) {
$(".mainContainer").append("<div>" + result[i].Title + "</div>");
}
},
error: function(data, req, text) {
console.log(data);
}
});
}
})();

function getQueryStringParameter(paramToRetrieve) {
  var params = document.URL.split("?")[1].split("&");
  //var strParams = "";
  for (var i = 0; i < params.length; i = i + 1) {
   var singleParam = params[i].split("=");
   if (singleParam[0] == paramToRetrieve) return singleParam[1];
  }
 }

3. Debug the project, you will see the result

More:Lists and list items REST API reference

Expend: Retrieve list items using client js from sahrepoint online

'use strict';

var currentcontext;
var hostcontext;
var hostweb;
var hostUrl;
var list;
var appUrl;
var clients

(function() {

// This code runs when the DOM is ready and creates a context object which is
// needed to use the SharePoint object model
$(document).ready(function() {

hostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
currentcontext = new SP.ClientContext.get_current();
hostcontext = new SP.AppContextSite(currentcontext, hostUrl);
hostweb = hostcontext.get_web();
appUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

getListItemsByClient();

});

function getListItemsByClient() {
list = hostweb.get_lists().getByTitle("Customers");
var camlString = "";

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(camlString);
clients = list.getItems(camlQuery);

currentcontext.load(clients);

currentcontext.executeQueryAsync(onQuerySucceeded, onQueryFailed);

}

function onQuerySucceeded(sender, args) {
var enumerator = clients.getEnumerator();

while (enumerator.moveNext()) {
var item = enumerator.get_current();
$(".mainContainer").append("<div> client : " + item.get_item("Title") + "</div>");
}
}

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
//var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve) return singleParam[1];
}
}
})();