Retrieve Sub Sites From Sharepoint Sites Or Sub Sites Using Pnp Javascript Core Library

Introduction

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

Note: The operations, given below, get the sub sites from the SharePoint sites (can be site collection or sub site as well). The logic can be executed by adding the script references on the content editor web part or any normal custom web part from site collections, or sites, or sub sites. The results will be retrieved only from the respective site where the code is executed, because we are using web object for data retrieval.

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 above order.

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 have explained about the necessity of using the references, in the above article. You can also download these references from Github site, as well.

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.

Access all sub sites of SharePoint Site or Sub Site

Here, we will see how we can fetch all the sub sites that are available on the current site, using PnP JavaScript library.

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",
},
});

Retrieve Sub Sites with Properties

We will see how we can access the available sub sites from the current site, using PnP JavaScript code.

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

$pnp.sp.web.webs.get().then(function(data){
console.log("There are totally " + data.length + " subsites available on the site (SCOPE : WEB)");
for(var i=0; i < data.length; i++){
console.log("Sub Site Title : " + data[i].Title);
console.log("Sub Site URL : " + data[i].Url);
console.log("---------------------------------");
}
}).catch(function(data){
});

Retrieve Sub Sites with only required properties

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

As many property names as you want, can be passed to get the values.

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

$pnp.sp.web.webs.select("Title","Url","Description").get().then(function(data){
console.log("There are totally " + data.length + " subsites available on the site (SCOPE : WEB)");
for(var i=0; i < data.length; i++){
console.log("Sub Site Title : " + data[i].Title);
console.log("Sub Site URL : " + data[i].Url);
console.log("Description : " + data[i].Description);
console.log("---------------------------------");
}
}).catch(function(data){
});

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

Summary

Thus, you have learned how to retrieve the sub sites of a site (or sub site) 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.