Retrieve All Column Values with PnP JS in SPFx

Introduction

SharePoint Framework (SPFx) is a powerful tool for developing SharePoint web parts and extensions. One common requirement in SharePoint development is reading data from SharePoint lists, especially when dealing with various field types. In this article, we will explore how to read SharePoint list field values using PnP JS in SPFx.

Implementation

For testing purposes, we will employ the SP Editor Extension, a convenient tool for evaluating PnP JS queries. Once you have added this extension to your Chrome browser, you can access the SharePoint tab within your developer tools. In this tab, we will execute PnP JS queries.

Here are the steps to follow

Begin by creating a SharePoint list that includes various types of columns.
Access the browser's developer tools by pressing the F12 key within the generated list window.
Navigate to the SharePoint tab within the developer tools interface.
Launch the PnP JS Console within this tab.
With these preparations in place, you'll be ready to explore and interact with SharePoint data using PnP JS directly from the console.

Solution 1:

Note. This solution will not work for complex columns like user, lookup, and similar types.

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";

  const item: any = await sp.web.lists.getByTitle("Read All Fields").items.getById(1)();
  console.log("Item >>", item);

  // text, multi line text, date, currency, choice, number, boolean, hyperlink and Image
  const data = item["FieldInternalName"];

})().catch(console.log)

Solution 2:

A single line of text

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";
  const textField = await sp.web.lists.getByTitle(listTitle).items.getById(1).select("Title")();
  console.log("textField >>", textField);

})().catch(console.log)

Multiple lines of text

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";
  const multilineTextField = await sp.web.lists.getByTitle(listTitle).items.getById(1).select("MultilineField")();
  console.log("multilineTextField >>", multilineTextField);

})().catch(console.log)

Currency

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";
  const currencyField = await sp.web.lists.getByTitle(listTitle).items.getById(1).select("CurrencyField")();
  console.log("currencyField >>", currencyField);
})().catch(console.log)

Number

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";
  const numberField = await sp.web.lists.getByTitle(listTitle).items.getById(1).select("NumberField")();
  console.log("numberField >>", numberField);

})().catch(console.log)

Date and time

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";
  const dateField = await sp.web.lists.getByTitle(listTitle).items.getById(1).select("DateField")();
  console.log("dateField >>", dateField);

})().catch(console.log)

Choice (Single choice & Multiple choice)

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";
  const choiceField = await sp.web.lists.getByTitle(listTitle).items.getById(1).select("ChoiceField")();
  console.log("choiceField >>", choiceField);

})().catch(console.log)

Yes/No

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";
  const booleanField = await sp.web.lists.getByTitle(listTitle).items.getById(1).select("BooleanField")();
  console.log("booleanField >>", booleanField);

})().catch(console.log)

Hyperlink

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";
  const hyperlinkField = await sp.web.lists.getByTitle(listTitle).items.getById(1).select("HyperlinkField")();
  console.log("hyperlinkField >>", hyperlinkField);

})().catch(console.log)

Image

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";
  const imageField = await sp.web.lists.getByTitle(listTitle).items.getById(1).select("ImageField")();
  console.log("imageField >>", imageField);

})().catch(console.log)

Output (Excluding Person and Lookup)

Excluding person and Lookup

Lookup (Single selection & Multiple selection)

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";
  const lookupField = await sp.web.lists.getByTitle(listTitle).items.getById(1).select("LookupField/Title", "LookupField/ID").expand("LookupField")();
  console.log("lookupField >>", lookupField);
})().catch(console.log)

Output

Single Selection and Multiple Selection

User

import { sp } from "@pnp/sp/presets/all";

(async () => {

  const listTitle = "Read All Fields";
  const personField = await sp.web.lists.getByTitle(listTitle).items.getById(1).select("PersonField/EMail", "PersonField/Name", "PersonField/Title", "PersonField/ID").expand("PersonField")();
  console.log("personField >>", personField);

})().catch(console.log)

Output

User

Conclusion

In this blog post, we covered the essential steps to get you started with retrieving column values from a SharePoint list using PnP JS. You can expand on this foundation to build more advanced solutions that leverage SharePoint data to meet your organization's specific needs.

Happy coding!

I hope this helps.

Sharing is caring.