How to use @pnp/sp to query a person column in an SP list to get the name

0
votes

I have a web part that which needs to retrieve the Name property of a person column (a people picker) so I can populate state with it and subsequently populate a field. Here's the function that queries the item:

private _jeChange = (ev: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => {
    this.setState({ 
      SelectedJE: option.text,
    
    }, () => { 
      const selJE = this.state.SelectedJE;
    
    if (selJE && selJE.length > 0) {
      
      let _item = this.state.MyListItems.find((item) => {
        return item.JobRef == selJE;
      });
      this.setState({
 
        JEDeptContact: _item.DeptContactId,

   }, () => {
     sp.web.lists.getByTitle("MyList").items.getById(_item.Id).select("DeptContact", "Lookup/Name", "Lookup/ID").expand("Lookup").get().then((item: any[]) => {
          console.log(item);
        });
      
        });
      }
    });
  }

The _item.DeptContactId successfully populates the state with the Id of the user in the person column, but I want the Name not the Id, how would I resolve the Id to the Name? Do I need to use expand to get the Name? If so how? I've read this but I don't know where to use the expand: https://pnp.github.io/pnpjs/sp/items/

1
spfx

1 Answers

0
votes

Found it:

if(_item.DeptContactId){
  sp.web.getUserById(_item.DeptContactId).select("Title", "DeptContact/Title").expand("DeptContact").get().then(r => {
      this.setState({
         JEDeptContact: r.Title,
      });
    });