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

%3CLINGO-SUB%20id%3D%22lingo-sub-1787780%22%20slang%3D%22en-US%22%3EHow%20to%20use%20%40pnp%2Fsp%20to%20query%20a%20person%20column%20in%20an%20SP%20list%20to%20get%20the%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1787780%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EI%20have%20a%20web%20part%20that%20which%20needs%20to%20retrieve%20the%20Name%20property%20of%20a%20person%20column%20(a%20people%20picker)%20so%20I%20can%20populate%20state%20with%20it%20and%20subsequently%20populate%20a%20field.%20Here's%20the%20function%20that%20queries%20the%20item%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eprivate%20_jeChange%20%3D%20(ev%3A%20React.FormEvent%3CHTMLDIVELEMENT%3E%2C%20option%3F%3A%20IDropdownOption%2C%20index%3F%3A%20number)%20%3D%26gt%3B%20%7B%0A%20%20%20%20this.setState(%7B%20%0A%20%20%20%20%20%20SelectedJE%3A%20option.text%2C%0A%20%20%20%20%0A%20%20%20%20%7D%2C%20()%20%3D%26gt%3B%20%7B%20%0A%20%20%20%20%20%20const%20selJE%20%3D%20this.state.SelectedJE%3B%0A%20%20%20%20%0A%20%20%20%20if%20(selJE%20%26amp%3B%26amp%3B%20selJE.length%20%26gt%3B%200)%20%7B%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20let%20_item%20%3D%20this.state.MyListItems.find((item)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20return%20item.JobRef%20%3D%3D%20selJE%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20this.setState(%7B%0A%20%0A%20%20%20%20%20%20%20%20JEDeptContact%3A%20_item.DeptContactId%2C%0A%0A%20%20%20%7D%2C%20()%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20sp.web.lists.getByTitle(%22MyList%22).items.getById(_item.Id).select(%22DeptContact%22%2C%20%22Lookup%2FName%22%2C%20%22Lookup%2FID%22).expand(%22Lookup%22).get().then((item%3A%20any%5B%5D)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20%20%20console.log(item)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3C%2FHTMLDIVELEMENT%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3CSPAN%3EThe%20_item.DeptContactId%20successfully%20populates%20the%20state%20with%20the%20Id%20of%20the%20user%20in%20the%20person%20column%2C%20but%20I%20want%20the%20Name%20not%20the%20Id%2C%20how%20would%20I%20resolve%20the%20Id%20to%20the%20Name%3F%20Do%20I%20need%20to%20use%20expand%2C%20if%20so%20how%3F%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1787780%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Contributor

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, if so how?

0 Replies