Filtering SharePoint Collection Objects Using PnP JavaScript Library

Introduction

PnP-JS-Core library contains the number of extensible methods and the properties. By using that, we can achieve the various actions in a simple code. To know more about this library component, visit the link, given below:

• Simplified JavaScript Library for SharePoint

PnP-JS-Core Library

SharePoint has a lot of building blocks in the collections, which are used to form SharePoint sites. These are used to manage the contents, and generate the reports based on contents and settings, etc. For managing or reporting the contents, we have to insert sorting or filtering functionality to the collections.

Based on 1.0.1 version of PnP-JS-Core library, following are the collections, available for the developers to be used in SharePoint add-ins or the Applications shown below: 

contenttypes	fields	Files	folders
items	lists	navigation	sitegroups
siteusers	usercustomactions	userprofiles	Views
webs

Syntax

PnP-JS-Core Component is built, using the REST API, so the same syntax for filtering and sorting can be used in these library extensions.

To apply the filter in REST API, we can use the below format to filter the items from the collection,

http://sharepointsite.com/_api/web/lists?$filter=<PropertyName condition PropertyValue>

REST API code, given below is an endpoint example to get the content type enabled lists,

http://sharepointsite.com/_api/web/lists?$filter=AllowContentTypes eq true

The same way, we can use the same syntax to apply filters in the PnP JS Core library, because it is developed on top of REST API.

Examples

Given below are some examples of PnP-JS-Core snippets to filter the objects, based on each property from the collection.

1. To filter the content type enabled lists, the code is shown below:
   

   //Show the content type enabled lists
   $pnp.sp.web.lists.filter('AllowContentTypes eq true').get().then(function(result)
   {
       //Add your code to display the collection results
   });

2. To filter the documents libraries from the lists, the code is shown below:
   

   //Show the document libraries
   $pnp.sp.web.lists.filter('BaseTemplate eq true').get().then(function(result)
   {
       //Add your code to display the collection results
   });

3. To filter the blog sites from the sub sites, the code is shown below:
   

   //Show the blog sites from the collection of subsites
   $pnp.sp.web.webs.filter("WebTemplate eq 'BLOG'").get().then(function(result)
   {
       //Add your code to display the collection results
   });

Note To replace, the following line needs to be used to display the results.

//Add your code to display results with the below code to display the object title
for (var i = 0; i < result.length; i++)
{
    console.log(result[i].Title);
}

Conclusion

This PnP JS library simplifies the code implementation and reduces the developer effort too. This article is also available here.