Post
Ask Question

Getting Started With Read List Items Using PnP JS In SPFx

Introduction

 
In this article, we will see how to get list items in spfx using pnp js. We will see all types of complex field queries like how to get lookup, people, and more. So let's see the step-by-step implementation.
 

Implementation

 
For the testing purpose, we will use SP Editor Extension which is a very cool extension to test PnP js queries. After adding an extension to chrome you can see the SharePoint tab in developer tools and we will run a query in PnPjs Console.
  • Create a SharePoint list with a different types of columns.
  • Open a develoepr tool (F12) > Go to the SharePoint tab > Open PnPjs Console
Get all list items
  1. import { sp } from "@pnp/sp/presets/all";  
  2.   
  3. (async () => {  
  4.   
  5.   const listName = "Employees";  
  6.   
  7.   /** Get all list items */  
  8.   const listItems = await sp.web.lists.getByTitle(listName).items.get();  
  9.   console.table(listItems);  
  10.   
  11. })().catch(console.log)  
 Output
 
All List Items 
 
Get list item by ID  
  1. import { sp } from "@pnp/sp/presets/all";  
  2.   
  3. (async () => {  
  4.   
  5.   const listName = "Employees";  
  6.   
  7.   /** Get list item by ID */  
  8.   const item = await sp.web.lists.getByTitle(listName).items.getById(1).get();  
  9.   console.table(item);  
  10.   
  11. })().catch(console.log)  
Output
 
list item by id 
 
Get list item by select parameter 
  1. import { sp } from "@pnp/sp/presets/all";  
  2.   
  3. (async () => {  
  4.   
  5.   const listName = "Employees";  
  6.   
  7.   /** Get list items using select param(text, number, boolean, choice , date field) */  
  8.   const itemBySelect = await sp.web.lists.getByTitle(listName).items.getById(1).select("Title,ID,Choice,Number,Currency,Date,YesNo,Hyperlink").get();  
  9.   console.table(itemBySelect);  
  10.   
  11. })().catch(console.log)  
 Output
 
Select query
 
Get list items using expand parameter (it will be used in People, Lookup and managed metadata and etc.) 
  1. import { sp } from "@pnp/sp/presets/all";  
  2.   
  3. (async () => {  
  4.   
  5.   const listName = "Employees";  
  6.   
  7.   /** Get lookup field value */  
  8.   const lookupVal = await sp.web.lists.getByTitle(listName).items.select("Lookup/Title,Lookup/Id").expand("Lookup").get();  
  9.   console.log("Lookup =>", lookupVal);  
  10.   
  11.   /** Get people field value */  
  12.   const userVal = await sp.web.lists.getByTitle(listName).items.select("People/Title,People/Department").expand("People").get();  
  13.   console.log("userVal =>", userVal);  
  14.   
  15. })().catch(console.log)  
Output
 
People and lookup
 
Get all field values from list items in one query 
  1. import { sp } from "@pnp/sp/presets/all";  
  2.   
  3. (async () => {  
  4.   
  5.   const listName = "Employees";  
  6.   
  7.   /** Get all fields value in one query */  
  8.   const allListItems = await sp.web.lists.getByTitle(listName)  
  9.     .items.getById(1)  
  10.     .select("Title,ID,Choice,Number,Currency,Date,YesNo,Hyperlink,Lookup/Title,Lookup/Id,People/Title,People/Department,MMD,TaxCatchAll/Term")  
  11.     .expand("Lookup,People,TaxCatchAll").get();  
  12.   console.table(allListItems);  
  13.   
  14.   
  15. })().catch(console.log)  
Output
 
All in one query
 

Summary

 
In this article, we have seen how to use pnp js to get list items with different types of fields.
 
Hope this helps!
 
Sharing is caring!


Similar Articles