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);

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); }

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

 listInfo += "


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

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

 + '</tr>


 listInfo += '</table>



// This function is executed if the above call fails
function onFail(sender, args) {
function getQueryStringParameter(paramToRetrieve) {
 var params =
 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

Document library in SharePoint online
Document library in SharePoint online
App view
App view

Feel free to share your questions and feedback in comments section below, share this post for your friends learning.


Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s