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

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

step1

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

step1a

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

step2

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

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.

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s