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";
  3. (async () => {
  5. const listName = "Employees";
  7. /** Get all list items */
  8. const listItems = await sp.web.lists.getByTitle(listName).items.get();
  9. console.table(listItems);
  11. })().catch(console.log)
Output
All List Items
Get list item by ID
  1. import { sp } from "@pnp/sp/presets/all";
  3. (async () => {
  5. const listName = "Employees";
  7. /** Get list item by ID */
  8. const item = await sp.web.lists.getByTitle(listName).items.getById(1).get();
  9. console.table(item);
  11. })().catch(console.log)
Output
list item by id
Get list item by select parameter
  1. import { sp } from "@pnp/sp/presets/all";
  3. (async () => {
  5. const listName = "Employees";
  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);
  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";
  3. (async () => {
  5. const listName = "Employees";
  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);
  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);
  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";
  3. (async () => {
  5. const listName = "Employees";
  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);
  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!