Pnpjs: Get another user info using PnPJS with SPFx

[Danielaroc]

I want to get a list of items from a SharePoint list, and display them in a specific way in SPFx webpart. I could use PnPJS to get Text and Number fields, but for the Author field, I am only getting the ID.

I'd like to get some other info, like email address, display name, and user image. My code now looks like this:

  sp.web.lists.getByTitle('Projects').items.get().then(items => {
           //console.log(items)
        })

However I am getting something like this:

How can I use AuthorId to get more info about that user?

Category

• [ ] Enhancement
• [ ] Bug
• [x] Question
• [ ] Documentation gap/issue

[sympmarc]

You need to expand the Author field because it is a complex field which is a lookup into the User Information List. You should also use a select to only request the columns you need to reduce the payload.

      sp.web
        .lists
        .getByTitle('Projects')
        .select("Id", "Title", "Author/ID", "Author/Title", "Author/Email")
        .expand("Author")
        .items.get().then(items => {
          //console.log(items)
        });

You should also consider using async/await to make your code simpler, rather than using then.

[Danielaroc]

@sympmarc Great tips. Thanks for the detailed answer!

[Danielaroc]

@sympmarc .. One more side question. If we use PnPJS, is there any need to use @microsoft/sp-http SPHttpClient?

[koltyakov]

@Danielaroc,

While using PnPjs I can't see serious reasons using @microsoft/sp-http. PnPjs provides everything @microsoft/sp-http can offer and even much more. And when a custom endpoint needed PnPjs's SPHttpClient can do it.

[Danielaroc]

Thank you @koltyakov!

[kevin-lane]

@sympmarc It did not work for me. I get the same result like before. I can't access information about the user who created the list item. I did exactly what you told.

[sympmarc]

@kevin-lane Hard to say what the issue is. Want to share your code?

[kevin-lane]

@sympmarc ` componentDidMount(){
this._getList();
}

private async _getList() {
    const items: any[] = await sp.web.lists.getByTitle("Tulips").items.get();
    this.setState({ items: items });
    console.log(this.state.items);
    console.log(items);

    const testItem  = await sp.web.lists
                    .getByTitle("Tulips")
                    .select("Id", "Title", "Author/ID", "Author/Title", "Author/Email")
                    .expand("Author")
                    .items.get();
    console.log(testItem);   
}`

[sympmarc]

@kevin-lane And what do you get back? Are you getting valid items from the list? If so, can you show what the JSON looks like?

[kevin-lane]

@sympmarc

[koltyakov]

In this code:

const testItem  = await sp.web.lists
  .getByTitle("Tulips")
  .select("Id", "Title", "Author/ID", "Author/Title", "Author/Email") // <-- this 
  .expand("Author") // <-- and this 
  .items.get(); // should be after items

like this:

const testItem  = await sp.web.lists
  .getByTitle("Tulips")
  .items
  .select("Id", "Title", "Author/ID", "Author/Title", "Author/Email")
  .expand("Author")
  .get();

[kevin-lane]

@koltyakov @sympmarc Thanks alot for the help. It work but when I have "Author/Email" in the select method it gives the following errors:

[juliemturner]

I'm pretty sure you have a case issue, it should be Author/EMail --- capital M.

[koltyakov]

Yep, the casing is important. Missed those with EMail. Linking https://github.com/pnp/pnpjs/issues/919#issuecomment-552437890 ticket as the one containing other expandable user props. Might be handy.

[sympmarc]

@juliemturner #FTW.

[kevin-lane]

Now it worked. Thanks a lot for the help @juliemturner, @koltyakov and @sympmarc 💯 👍