Retrieve List data in SharePoint Online (office 365) using JSOM

Create new project using App for SharePoint template under Apps in Visual Studio.

In the new project wizard enter your SharePoint site URL and select SharePoint Hosted and click Finish.

After project created open solution explorer and select App.js file for edit

var context;
var hostweburl;
var appweburl;
var appContextSite;
var list;
var listItems;
var web;

$(document).ready(function () {
 //SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getUrl);
 getUrl();
});

function getUrl() {
 hostweburl = getQueryStringParameter("SPHostUrl");
 appweburl = getQueryStringParameter("SPAppWebUrl");
 hostweburl = decodeURIComponent(hostweburl);
 appweburl = decodeURIComponent(appweburl);
 var scriptbase = hostweburl + "/_layouts/15/";
 $.getScript(scriptbase + "SP.Runtime.js",
 function () {
 $.getScript(scriptbase + "SP.js",
 function () { $.getScript(scriptbase + "SP.RequestExecutor.js", execOperation); }
 );
 }
 );
 event.preventDefault();
}

function execOperation() {
 context = new SP.ClientContext(appweburl);
 var factory =
 new SP.ProxyWebRequestExecutorFactory(
 appweburl
 );
 context.set_webRequestExecutorFactory(factory);
 appContextSite = new SP.AppContextSite(context, hostweburl);
 web = appContextSite.get_web();
 context.load(web);
 var camlQuery = new SP.CamlQuery();
 camlQuery.set_viewXml("");
 list = web.get_lists().getByTitle("Documents");
 listItems= list.getItems(camlQuery);
 context.load(list);
 context.load(listItems);
 context.executeQueryAsync(onSuccess, onFail);
}
function onSuccess() {
 $("#message").empty();
 var listInfo = '';
 var listEnumerator = listItems.getEnumerator();

 listInfo += "
<table>
<tr>
<th>Id</th>
<th>Title</th>
</tr>

";

 while (listEnumerator.moveNext()) {
 var listItem = listEnumerator.get_current();
 listInfo += '
<tr>
<td>' + listItem.get_item('ID') + '</td>

'
 + '
<td>' + listItem.get_item('FileLeafRef') + '</td>

'
 + '</tr>

\n';
 }

 listInfo += '</table>

';

 $("#message").html(listInfo);
}

// This function is executed if the above call fails
function onFail(sender, args) {
 alert(args.get_message());
}
function getQueryStringParameter(paramToRetrieve) {
 var params =
 document.URL.split("?")[1].split("&");
 for (var i = 0; i < params.length; i = i + 1) {
 var singleParam = params[i].split("=");
 if (singleParam[0] == paramToRetrieve)
 return singleParam[1];
 }
}

Code flow

Step 1: getUrl() function called when page get ready

Step 2: getUrl() function is collect host and app web URLs from query strings and adds some JavaScript files for reference and call execOperation() function

Step 3: execOperation() function is create app sire context and request Documents list data as asynchronous call

Step 4: onSuccess() event will receive list data, data written as html table and table added into div control