Retrieve SharePoint Lists From Site Or SubSites Using PnP JavaScript Library

Introduction

In this article, you will learn how to retrieve all the list details from SharePoint sites or site collections, using PnP JavaScript Core Library.

Note: The operations, given below, get information from the respective site collection or site where the code is executed. The logic can be executed by adding the script references on the content editor Web part or any normal custom Web part from the site collections or sites or sub sites. The results will be retrieved only from the respective site, where the code is executed.

The PnP JavaScript core library is supported by SharePoint 2013, SharePoint 2016 On Premises and Office 365 versions. The following operations are tested on SharePoint 2013 and Office 365 environments:

Prerequisite

The required JavaScript core library references for executing any operations, using PnP, are: 

• es6-promise.js
• fetch.js
• pnp.js or pnp.min.js

The script references should be called from the Web parts, only in the order given above.

Note: You can download the references from my initial article about PnP JavaScript Core library.

• Retrieve Sub Sites From SharePoint Site Collection Using PnP JavaScript Core Library 

I explained about the necessity of using the promise and retrieve JS references, in the article mentioned above. You can also download these references from Github site, as well.

We can set up the header before executing any operation. This is required, when you want the response type to be predetermined. Let us see how we can get the JSON data as a response. This has to be done once, before initiating all the requests on the page. This step is not mandatory for O365 environment.

The code snippet, given below, shows setting up the header:

$pnp.setup({
    headers: {
        "Accept": "application/json; odata=verbose",
    },
});

Access all lists from the current site

Here, we will see, how we can retrieve all the lists from the current SharePoint site, using PnP JavaScript library.

The code snippet, given below, lists down all the lists, available from the current site. It shows the lists count for a current site. This will also show the lists' title and URL.

// Code to get all lists from a site
$pnp.sp.web.lists.get().then(function(data){
    console.log("There are totally " + data.length + " lists available on the site");
    for(var i=0; i < data.length; i++){
        console.log("List Title : " + data[i].Title);
        console.log("List Id    : " + data[i].Id);
        console.log("---------------------------------");
    }
}).catch(function(data){
console.log(data);
});

Access Lists with only required properties

The required property values can only be retrieved for all lists, using the select method. In the select method, the required property names are passed as a string array.

Many property names can be passed to get the values.

The code snippet, given below, gets only the required property values for all the lists. It shows the list count for a site, where the script is configured. This will also show the list title and the URL.

// Code to get all list title from current site
$pnp.sp.web.lists.select("Title").get().then(function(data){
    console.log("There are totally " + data.length + " lists available on the site");
    for(var i=0; i < data.length; i++){
        console.log("List Title : " + data[i].Title);
        console.log("---------------------------------");
    }}).catch(function(data){
console.log(data);
});

Access Lists from Site Collection

Using the site object, the data/lists from the site collection can be retrieved. For example, if we try running the logic from a sub site or site collection, lists available on the site collection will only will be retrieved.

The code snippet, given below, shows the operation.

// Code to get all list details from site collection
$pnp.sp.site.rootWeb.lists.get().then(function(data){
    console.log("There are totally " + data.length + " lists available on the site");
    for(var i=0; i < data.length; i++){
        console.log("List Title : " + data[i].Title);
        console.log("List Id    : " + data[i].Id);
        console.log("---------------------------------");
    }
}).catch(function(data){
console.log(data);
});

Note: The results can be viewed on the Browser's debugger console for the operations, given above.

Summary

Thus, you have learned, how to retrieve the lists from a site or sub site or site collection and their properties, using PnP JavaScript core library. PnP JavaScript library is supported by SharePoint 2013, SharePoint 2016 On Premises and Office 365 versions. The operations, mentioned above, are tested in SharePoint 2013 and Office 365 environments.