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

In this SharePoint JSOM 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.

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.

The location of SP.js file is E:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\TEMPLATE\LAYOUTS

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:

• SharePoint online: Add Columns or Fields to SharePoint List or Document Library using JavaScript Object Model (jsom)
• CRUD Operations with ECMA or jsom in SharePoint 2013 and SharePoint 2016 Part-2
• Upload multiple attachments to list items using JSOM and REST API in SharePoint online
• How to read file content using JavaScript object model jsom in SharePoint Online Office 365?
• Retrieve SharePoint list items programmatically using jsom, rest api and csom in SharePoint Online/2016/2013
• How to create a list using jsom (JavaScript object model) in SharePoint?
• Retrieve all users from all groups using jsom in SharePoint Online

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.