Introduction

In this article, we will see how to read fields from the SharePoint list using PnPjs in spfx. There are different types of methods to get it like getByTitle, getById, and getByInternalNameOrTitle, and so on. so we will see how to use all of them.
so let's see step-by-step implementation.

Implementation

For testing purposes, 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 different types of columns.
  • Open a develoepr tool (F12) > Go to the SharePoint tab > Open PnPjs Console
Get all list fields
  1. import { sp } from "@pnp/sp/presets/all";
  3. (async () => {
  4. let listName = "Employees";
  5. /** Get all list fields */
  6. const allFields = await sp.web.lists.getByTitle(listName).fields.get();
  7. console.table(allFields);
  8. })().catch(console.log)
Output
Get all fields
Filter fields
  1. import { sp } from "@pnp/sp/presets/all";
  3. (async () => {
  4. let listName = "Employees";
  5. /** Filter by do not show hidden and readonly field */
  6. const filterFields = await sp.web.lists
  7. .getByTitle(listName)
  8. .fields
  9. .filter("Hidden eq false and ReadOnlyField eq false")
  10. .get();
  11. console.table(filterFields);
  12. })().catch(console.log)
Output
Filter fields
Get by title
  1. import { sp } from "@pnp/sp/presets/all";
  3. (async () => {
  4. let listName = "Employees";
  5. /** get by title */
  6. const fieldByTitle = await sp.web.lists.getByTitle(listName).fields.getByTitle("Title")();
  7. console.table(fieldByTitle);
  8. })().catch(console.log)
Output
Get by title
Get by id
  1. import { sp } from "@pnp/sp/presets/all";
  3. (async () => {
  4. let listName = "Employees"
  6. /** get by ID */
  7. const fieldById = await sp.web.lists.getByTitle(listName).fields.getById("34ad21eb-75bd-4544-8c73-0e08330291fe")();
  8. console.table(fieldById);
  10. })().catch(console.log)
Output
Get by id
Get by internal name ot title
  1. import { sp } from "@pnp/sp/presets/all";
  3. (async () => {
  5. let listName = "Employees";
  7. /** get by internal name or title */
  8. const fieldByNameOrTitle = await sp.web.lists.getByTitle(listName).fields.getByInternalNameOrTitle("Choice")();
  9. console.table(fieldByNameOrTitle);
  11. })().catch(console.log)
Output
Get by name or title
Filter by field type
  1. import { sp } from "@pnp/sp/presets/all";
  3. (async () => {
  5. let listName = "Employees";
  7. /** Filter by field type */
  8. const allFields = await sp.web.lists.getByTitle(listName).fields.get();
  9. console.table(allFields);
  10. let choiceFields = allFields.filter(c => c['odata.type'] === "SP.FieldChoice")
  11. console.table(choiceFields);
  13. })().catch(console.log)
Output
Filter by field type

Summary

In this article, we have seen how to get fields from the SharePoint list using pnp js in spfx.
Hope this helps!
Sharing is caring!