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 use
SP.AppContextSite in the endpoint URI. See How 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')/[email protected]='" + 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);
			}
		});
	}
})();

3. Debug the project, you will see the result

More:Lists and list items REST API reference