PnP-JS-Core: Get all field values from SharePoint List Item

PnP-JS-Core library contains the number of extensible methods and properties. By using that we can achieve the various actions in a simple code. To know more about this library component, visit the below links,

Simplified JavaScript Library for SharePoint

PnP-JS-Core Library

In this post, I’ll explain on how to get all the field values from SharePoint list item using PnP JavaScript Library. We have three properties to retrieve the field values from list item. Those are listed below,

In HTML format:

The below syntax used to return the given SharePoint List Item’s field values in a HTML representation
Syntax:

$pnp.sp.web.lists.getByTitle('ListTitle').items.getById(1).fieldValuesAsHTML.get().then(function(data) {
    //Success Message
});

Example:
The below example displays all the field values in a html format in a developer console for the retrieved list item from SharePoint list “TestList”. This list has three user editable fields “Title, MyLookup and URL”.

[code language=”javascript”]

$pnp.sp.web.lists.getByTitle(‘TestList’).items.getById(1).fieldValuesAsHTML.get().then(function(data) {
//Populate all field values for the List Item
for (var k in data) {
console.log(k + " – " + data[k]);
}
});

[/code]

Output:

In Text format:

The below syntax used to return the specified SharePoint ListItem’s field values in a Text representation.
Syntax:

$pnp.sp.web.lists.getByTitle('ListTitle').items.getById(1).fieldValuesAsText.get().then(function(data) {
    //Success Message
});

Example:
The below example displays all the field values in a text format in a developer console for the retrieved list item from SharePoint list “TestList”. This list has three user editable fields “Title, MyLookup and URL”

[code language=”javascript”]

$pnp.sp.web.lists.getByTitle(‘TestList’).items.getById(1).fieldValuesAsText.get().then(function(data) {
//Populate all field values for the List Item
for (var k in data) {
console.log(k + " – " + data[k]);
}
});

[/code]

Output:

In Edit mode format:

The below syntax used to return the specified SharePoint ListItem’s field values as a format use in edit controls.
Syntax:

$pnp.sp.web.lists.getByTitle('ListTitle').items.getById(1).fieldValuesForEdit.get().then(function(data) {
    //Success Message
});

Example:
The below example displays all the field values in a format (which is used in edit controls) in a developer console for the retrieved list item from SharePoint list “TestList”. This list has three user editable fields “Title, MyLookup and URL”

[code language=”javascript”]

$pnp.sp.web.lists.getByTitle(‘TestList’).items.getById(1).fieldValuesForEdit.get().then(function(data) {
//Populate all field values for the List Item
for (var k in data) {
console.log(k + " – " + data[k]);
}
});

[/code]

Output:

By looking in to the output images in each format explains the differences in retrieving the result.

• In HTML format
  Author, Editor field returns the user name with link in html string.
• In Text format
  The same Author, Editor field returns only the user name.
• In Edit control format
  The values retrieved as same as text format representation.