Getting Started With Read Fields From The List Using PnP JS In SPFx

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

import { sp } from "@pnp/sp/presets/all";
(async () => {
let listName = "Employees";
/** Get all list fields */
const allFields = await sp.web.lists.getByTitle(listName).fields.get();
console.table(allFields);
})().catch(console.log)

Output

Filter fields

import { sp } from "@pnp/sp/presets/all";
(async () => {
let listName = "Employees";
/** Filter by do not show hidden and readonly field */
const filterFields = await sp.web.lists
.getByTitle(listName)
.fields
.filter("Hidden eq false and ReadOnlyField eq false")
.get();
console.table(filterFields);
})().catch(console.log)

Output

Get by title

import { sp } from "@pnp/sp/presets/all";
(async () => {
let listName = "Employees";
/** get by title */
const fieldByTitle = await sp.web.lists.getByTitle(listName).fields.getByTitle("Title")();
console.table(fieldByTitle);
})().catch(console.log)

Output

Get by id

import { sp } from "@pnp/sp/presets/all";
(async () => {
let listName = "Employees"
/** get by ID */
const fieldById = await sp.web.lists.getByTitle(listName).fields.getById("34ad21eb-75bd-4544-8c73-0e08330291fe")();
console.table(fieldById);
})().catch(console.log)

Output

Get by internal name ot title

import { sp } from "@pnp/sp/presets/all";
(async () => {
let listName = "Employees";
/** get by internal name or title */
const fieldByNameOrTitle = await sp.web.lists.getByTitle(listName).fields.getByInternalNameOrTitle("Choice")();
console.table(fieldByNameOrTitle);
})().catch(console.log)

Output

Filter by field type

import { sp } from "@pnp/sp/presets/all";
(async () => {
let listName = "Employees";
/** Filter by field type */
const allFields = await sp.web.lists.getByTitle(listName).fields.get();
console.table(allFields);
let choiceFields = allFields.filter(c => c['odata.type'] === "SP.FieldChoice")
console.table(choiceFields);
})().catch(console.log)

Output

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!