Retrieve Folders From SharePoint Using PnP JavaScript Library

Introduction

In this article, you will learn how to retrieve the folders from SharePoint sites and libraries, using PnP JavaScript Core Library.

Note: SharePoint libraries are considered as the folders. The operations 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 corresponding site or site collection, which the site is part of.

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 retrieving JS references in the article's link, mentioned above. You can also download these references from the 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 the setting up of header:

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

Retrieve Folders from SharePoint Site

In this section, you will learn how to retrieve all the folders available on the site, using PnP JavaScript Core Library.

First, we need to retrieve the web object and then the folders collection. Get method is used to retrieve all the information of folders.

The following code snippet helps in retrieving all the folders and properties from a site.

// Retrieve Folders from Current Site
$pnp.sp.web.folders.get().then(function(data){
    console.log("There are totally " + data.length + " folders available on the current site");
    // Displays results on debugger console
    for(var i=0; i < data.length; i++){
        console.log(data[i].Name + " - " + data[i].ServerRelativeUrl);
    }
}).catch(function(data){
console.log(data);
});

The following snapshot shows the folder details response from the site.

 

Retrieve Folder by Name from SharePoint Site

In this section, you will learn how to retrieve the required folder from the site, using PnP JavaScript Core Library. The folder name is passed using getByName method to retrieve the required information.

The following code snippet shows retrieving only required folder.

// Retrieve Folder By Name from Current Site
$pnp.sp.web.folders.getByName('SPDocuments').get().then(function(data){
    // Displays results on debugger console
    console.log(data.Name + " - " + data.ServerRelativeUrl);
}).catch(function(data){
console.log(data);
});

Retrieve Folders from SharePoint Libraries (folders)

In this section, you will learn how to retrieve the sub folders from SharePoint libraries, using PnP JavaScript Core Library. The libraries are considered as folders on SharePoint site.

From the web object, folders collection is retrieved. The library name is passed and the required library is retrieved. Then, the sub folders collection is retrieved from the library object.

The following code snippet retrieves the sub folders from a library or folder.

// Retrieve sub folders from a folder / library
$pnp.sp.web.folders.getByName('SPDocuments').folders.get().then(function(data){
    // Displays results on debugger console
    for(var i=0; i < data.length; i++){
        console.log(data[i].Name + " - " + data[i].ServerRelativeUrl);
    }
}).catch(function(data){
console.log(data);
});

Retrieve Folders from SharePoint Site Collection

In this section, you will learn how to retrieve the folders from SharePoint site collection. The site object is used for retrieving the content. The logic can be executed from sub sites as well. Still, the site collection folder collection information is retrieved.

The following code snippet retrieves folders from the site collection.

$pnp.sp.site.rootWeb.folders.get().then(function(data){
    console.log("There are totally " + data.length + " folders available on the root site collection");
    // Displays results on debugger console
    for(var i=0; i < data.length; i++){
        console.log(data[i].Name + " - " + data[i].ServerRelativeUrl);
    }
}).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 folders information from SharePoint site or site collection or library in different ways, 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.