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

Introduction

In this article, you will learn how to retrieve all the sub sites from SharePoint site collection, using PnP JavaScript core library.

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 in the above order only.

The necessary references are attached as a zip file in this article. You can also download these references from the 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 Site Collection

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

• The required parameters for the traditional Aj calls are URL, header, success and error functions. Using PnP JavaScript libraries, the appropriate objects should be called. Only the header should be set for getting a user preferred response type.
  
  
• 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:

Retrieve Properties

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

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