SharePoint 2013 Hosting UK - HostForLIFE.eu :: How to Acces Sharepoint Data using JavaScript Object Model

In this post, I will provide details for you to access SharePoint data with JavaScript Object Model. JavaScript Object Model has different syntax together, I will cover common tasks of a SharePoint to get familiarity in accessing the objects. Files that are referred for JavaScript Object Model are:

<script type="text/ecmascript" src="/_layouts/SP.Core.js" />
<script type="text/ecmascript" src="/_layouts/SP.Debug.js" />
<script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />

Now, I will show how to Access SharePoint Data using 2 easy ways:

How to Access SharePoint Website

The following code explains how we can access SharePoint Website:

var siteUrl = '/MySiteCollection/mysite ';
 
function getMyWebSite() {
    var clientContext = new SP.ClientContext(siteUrl);
 
    this.WebsiteObj = clientContext.get_web();
 
    clientContext.load(this.WebsiteObj);
 
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onGetSucceeded), Function.createDelegate(this, this.onGetFailed));
}
 
function onGetSucceeded(sender, args) {
    alert('Site Title: ' + this.WebsiteObj.get_title() + ' Site Decription: ' + this.WebsiteObj.get_description());
}
 
function onGetFailed(sender, args) {
    alert('Site Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());

var siteUrl = '/MySiteCollection/mysite ';

function getMyWebSite() {

var clientContext = new SP.ClientContext(siteUrl);

this.WebsiteObj = clientContext.get_web();

clientContext.load(this.WebsiteObj);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onGetSucceeded), Function.createDelegate(this, this.onGetFailed));

}

function onGetSucceeded(sender, args) {

alert('Site Title: ' + this.WebsiteObj.get_title() + ' Site Decription: ' + this.WebsiteObj.get_description());

}

function onGetFailed(sender, args) {

alert('Site Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());

We have to give only site collection relative url for getting the site object. clientContext.get_web() gets the web object and clientContext.get_site() is the method used to get site collection object.

How to Get SharePoint Data List

The following code explains how we can access SharePoint data list:

var siteUrl = '/MySiteCollection/mysite';
 
function getMySiteListData() {
 
    var clientContext = new SP.ClientContext(siteUrl);
    var empList = clientContext.get_web().get_lists().getByTitle('EmpInfo');
 
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name='Department'/>' +
        '<Value Type='Text'>HR</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
    this.empListItems = empList.getItems(camlQuery);
 
    clientContext.load(empListItems);
 
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onListDataSucceeded), Function.createDelegate(this, this.onListDataFailed));        
 
}
 
function onListDataSucceeded(sender, args) {
 
    var empInfo = '';
 
    var listItemEnumerator = empListItems.getEnumerator();
 
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        empInfo += 'nEmp ID: ' + oListItem.get_id() +
            'nEmployee Name: ' + oListItem.get_item('Title');
    }
 
    alert(empInfo.toString());
}
 
function onListDataFailed(sender, args) {
 
    alert('List Data fetch failed. ' + args.get_message() + 'n' + args.get_stackTrace());
}

var siteUrl = '/MySiteCollection/mysite';

function getMySiteListData() {

var clientContext = new SP.ClientContext(siteUrl);

var empList = clientContext.get_web().get_lists().getByTitle('EmpInfo');

var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name='Department'/>' +

'<Value Type='Text'>HR</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');

this.empListItems = empList.getItems(camlQuery);

clientContext.load(empListItems);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onListDataSucceeded), Function.createDelegate(this, this.onListDataFailed));

}

function onListDataSucceeded(sender, args) {

var empInfo = '';

var listItemEnumerator = empListItems.getEnumerator();

while (listItemEnumerator.moveNext()) {

var oListItem = listItemEnumerator.get_current();

empInfo += 'nEmp ID: ' + oListItem.get_id() +

'nEmployee Name: ' + oListItem.get_item('Title');

}

alert(empInfo.toString());

}

function onListDataFailed(sender, args) {

alert('List Data fetch failed. ' + args.get_message() + 'n' + args.get_stackTrace());

}

I hope this post is helpful for you. Good luck and happy coding!

SharePoint 2013 Hosting Recommendation

HostForLIFE.eu’s SharePoint 2013 Hosting solution offers a comprehensive feature set that is easy-to-use for new users, yet powerful enough for the most demanding web developer expert. Hosted SharePoint Foundation 2013 is the premiere web-based collaboration and productivity enhancement tool on the market today. With SharePoint 2013 Foundation, you can quickly access and manage documents and information anytime, anywhere though a Web browser in a secure and user friendly way. SharePoint hosting services start at only at €9.99/mo, allowing you to take advantage of the robust feature set for a small business price. HostForLIFE.eu offers a variety of hosted SharePoint Foundation 2013 plans as well as dedicated SharePoint 2013 Foundation options.

SharePoint 2013 Hosting UK – HostForLIFE.eu :: How to Acces Sharepoint Data using JavaScript Object Model

How to Access SharePoint Website

How to Get SharePoint Data List

BLOGROLL

Featured On

SharePoint 2013 Hosting UK – HostForLIFE.eu :: How to Acces Sharepoint Data using JavaScript Object Model

How to Access SharePoint Website

How to Get SharePoint Data List

BLOGROLL

Featured On

Tags