[Solved] Uncaught TypeError: SP.ClientContext is not a constructor in SharePoint Online JSOM (JavaScript object model)

sp.clientcontext is not a constructor

In this SharePoint tutorial, I will explain how to solve Uncaught TypeError: SP.ClientContext is not a constructor error which comes in SharePoint Online/2013/2016 JSOM (JavaScript Object Model). The error SP.ClientContext is not a constructor comes in javascript object model (jsom) in SharePoint 2013 Online.


While working with the JavaScript object model (jsom) in SharePoint online site, I got an error which says: sp.clientcontext is not a constructor. When we do F12 in the browser, the details error coming as:

Uncaught TypeError: SP.ClientContext is not a constructor at method name like this.

sp.clientcontext is not a constructor
sp.clientcontext is not a constructor

If you are working in a client object model in SharePoint online, we need to remember that to work with the JavaScript Object model we have to use SP.js file which is located in the LAYOUTS folder.

Microsoft provides SP.ClientContext constructor which is presented in SP.js. This constructor initializes a new instance of the ClientContext object for the specified SharePoint site.

Here I was using the below code to retrieve the lists and libraries available in the site using javascript object model.

<div id=”divGetListData”></div>

<script>
$(function () {
getListData();
});

function getListData() {
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
this.collList = oWebsite.get_lists();
clientContext.load(collList);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
var listInfo = ”;
var listEnumerator = collList.getEnumerator();
while (listEnumerator.moveNext()) {
var oList = listEnumerator.get_current();
listInfo += ‘Title: ‘ + oList.get_title() + ‘ – Created: ‘ +
oList.get_created().toString() + ‘<br />’;
}
$(“#divGetListData”).html(listInfo);
}

function onQueryFailed(sender, args) {
alert(‘Request failed. ‘ + args.get_message() +
‘\n’ + args.get_stackTrace());
}
</script>

Solution for Uncaught TypeError: SP.ClientContext is not a constructor

In the above code it was not displaying the lists instead it was given the error as sp.clientcontext is not a constructor. If SP.ClientContext() executes before SP.js loaded in the page then the error will come. So we need to modify the code so that the getListData() method will call after SP.js loaded successfully.

We can use ExecuteOrDelayUntilScriptLoaded method which will call the method after sp.js filed loaded in the page.

<div id=”divGetListData”></div>

<script>
$(function () {
ExecuteOrDelayUntilScriptLoaded(getListData, “sp.js”);
});

function getListData() {
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
this.collList = oWebsite.get_lists();
clientContext.load(collList);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
var listInfo = ”;
var listEnumerator = collList.getEnumerator();
while (listEnumerator.moveNext()) {
var oList = listEnumerator.get_current();
listInfo += ‘Title: ‘ + oList.get_title() + ‘ – Created: ‘ +
oList.get_created().toString() + ‘<br />’;
}
$(“#divGetListData”).html(listInfo);
}

function onQueryFailed(sender, args) {
alert(‘Request failed. ‘ + args.get_message() +
‘\n’ + args.get_stackTrace());
}
</script>


You may like following SharePoint jsom tutorials:

After this, the error sp.clientcontext is not a constructor did not come and it properly displays me the lists and libraries in SharePoint Online or SharePoint 2013/2016. Hope this will be helpful.

Check out Best Alternative to InfoPath -> Try Now


About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →