How To Load Objects using SharePoint JSOM

The following article applies to SharePoint 2010, SharePoint 2013, SharePoint 2016 and SharePoint Online.

Our team recently ran into an interesting issue where they needed to load multiple similar objects using the SharePoint JavaScript Object Model (JSOM).

They were nervous about the thought of having to load each of them into separate JavaScript variables.  This was especially true because the number of objects to be loaded was going to be dynamic.

The scenario was this:

  • Must display a list of all the SharePoint libraries and their views within a specific site
  • Must be aware of JavaScript caching
  • Using the jQuery UI accordion plugin in SharePoint


Typically, the team would put JavaScript code and CSS stylings into either a text file to be referenced by a Content Editor web part or, if just JavaScript, into a .JS file and use a Script Editor web part to load the file.

This will make your life so much easier when it’s time to make updates without having to edit the page > edit the web part > update the code > save the web part > save the page > and so on.


Step 1 – Let’s get JQuery Loaded

First, create a text file in the Site Assets library to store your code. We will need jQuery and jQuery UI so add that.

Just in case someone uses this on a page that has jQuery loaded, let’s check if it is there before loading. We will also need a DIV to stick our HTML in when we are done.



Step 2 – Get the JavaScript NameSpace In Place

If you are not doing it yet, start. It doesn’t take that long to put in place and will save you from headaches in the future.

script type="text/javascript">
var IncWorx = IncWorx || {};
IncWorx.SP = IncWorx.SP || {};
IncWorx.SP.LibraryViews = { 
    allViews: [], 
    init: function () {} 


Step 3 – Get SharePoint Client Context and Load Lists

Here we are going to create our client context object and query the site to find all lists/libraries. This code is going in the “init” function above.

// Add any list/library names you want to exclude
// Let's omit some SharePoint internal list/library names
var excludedLists = ["fpdatasources", "Master Page Gallery", "MicroFeed", "Site Assets", "Style Library", "Tasks", "TaxonomyHiddenList", "User Information List", "wfpub", "wfsvc", "Workflow History", "Workflow Tasks", "Workflows"];

// Add any specific view names you want to exclude
var excludedViewNames = [];

var context = new SP.ClientContext();
var web = context.get_web();

// Get all lists and libraries from the site
var lists = web.get_lists();

    Function.createDelegate(this, function ()
		// Code in next step
	Function.createDelegate(this, function (sender, args)


Step 4 – Load an Array of SharePoint Objects

Here is where we will load all the View objects for the Lists/Libraries that we have retrieved. Since we don’t want to create a JavaScript variable for every single view object (realistically we can’t because it will be ever-changing), let’s add those objects into an array to reference later.

Function.createDelegate(this, function ()
    var enumerator = lists.getEnumerator(); 
    while (enumerator.moveNext()) 
        var list = enumerator.get_current(); 

        // If you want to only show document libraries
        //if(list.get_baseType() == 1) // If you want to only show lists //if(list.get_baseType() == 0)

        // We're going to exclude some OOTB SharePoint lists that we do not want to display
        if (excludedLists.indexOf(list.get_title()) < 0) 
            // Create an object to store the views collection for the list/library
            var viewObj = { 
                title: list.get_title(), 
                views: list.get_views()

            // Add the object to an array to access later

Here, we create a custom object “viewObj” with a property of title and views.

We need the title property so we know what List/Library those views are associated with.

The views property will ultimately contain the collection of SharePoint view objects that will be loaded from the Client Context.

We tell SharePoint to load each of the lists views and then we will run a single executeQueryAsync to get the information.


Step 5 – Process those Views!

Here is where we access those view objects in our array and start building the jQuery Accordion HTML.

IMPORTANT: Replace the red *** located in the code snippet below with a < . 

    Function.createDelegate(this, function () 
        var finalContent = "";

        // This is where we can access our array of objects loaded by SharePoint.
        // We dynamically added the references into an Array
        // No need for multiple JavaScript variables or multiple Execute Queries.
        // We can just loop through the array. 
        for (var x = 0; x < IncWorx.SP.LibraryViews.allViews.length; x++)
            var viewObj = IncWorx.SP.LibraryViews.allViews[x];
            var viewsList = [];
            finalContent += "" + viewObj.title + "
"; var viewEnum = viewObj.views.getEnumerator(); while (viewEnum.moveNext()) { var view = viewEnum.get_current(); var viewTitle = view.get_title(); // Skip any view names that we have chosen to ignore if (viewTitle.length > 0 && excludedViewNames.indexOf(viewTitle) < 0) { finalContent += "- ***a href='" + view.get_serverRelativeUrl() + "'>" + viewTitle + "
" } } finalContent += "
"; //close the div surrounding the views } // Dump the HTML into our DIV and use the jQuery UI Accordion to make it look nice $("#libraryAccordion").html(finalContent); $("#libraryAccordion").accordion(); // Let’s put the final values into the Session cache so we don’t have to reload it each time – stays in cache as long as the tab is open sessionStorage["LibraryViewCache"] = finalContent; }), Function.createDelegate(this, function (sender, args) { console.log(args.get_message()); }) );

The Final Result

Here we have all of the lists and views from a SharePoint site formatted nicely in a jQuery UI accordion.


Wrap Up and Final Code

What we have done here is load multiple SharePoint objects using a single JavaScript array so there is no need to create specific variables for each object.

Additionally, loading all of the objects using a single executeQueryAsync helps with the performance of the script.

A word of caution – SharePoint does have some limits on how many objects can be loaded with a single executeQueryAsync so be careful!

Our complete code:

Related Articles to Help Grow Your Knowledge

Features and Benefits of Microsoft 365
Features and Benefits of Microsoft 365

Microsoft 365 or Microsoft Office 365 has all the apps that help you reach your business or educational goals. Learn more about the features and benefits of Microsoft 365 that will help you achieve those goals efficiently. This guide will also help those who have...

Automating Your Tasks with Teams and Power Automate
Automating Your Tasks with Teams and Power Automate

Microsoft Teams is a collaboration platform that combines all the tools your team needs to be productive. MS Teams is an ideal platform to enhance productivity and help you accomplish more things. With its powerful chat features, you can easily stay in touch with your...

Do You Need Power Automate Dataverse Integration?
Do You Need Power Automate Dataverse Integration?

Part of the Microsoft Power Platform, Power Automate (formerly known as Microsoft Flow) is a must-have tool for any business. Power Automate can help you increase business productivity by automating routine processes and tasks, freeing your employees to focus on...