Expanding People and Groups Column using React SPFx

Question

Being new to SPFx , I've not able to retrieve values from people and group Attendee column

Below are the steps I followed

Defined Attendee in the below interface

export interface IListItem{
  
    CourseName:{ID:Number; Title:String;};
    Attendee:{ID:Number; Title:String;};
    Status: {ID:Number; Title:String;};
    Completed: Date;   
  }
 
import { IListItem } from './ListItemInterface';
 
export class EntityListItems{
  
  public CourseNameID:Number;
  public CourseNameTitle:String;
  public Completed:Date;
  public AttendeeID: Number; 
  public AttendeeTitle:String;
  public StatusID: Number; 
  public StatusTitle:String;
 
  constructor(item: IListItem){
    
    this.CourseNameID = item.CourseName.ID;
    this.CourseNameTitle = item.CourseName.Title;
    this.Completed = item.Completed;
    this.AttendeeID = item.Attendee.ID;
    this.AttendeeTitle = item.Attendee.Title;
    this.StatusID = item.Status.ID;
    this.StatusTitle = item.Status.Title;
 
  }
}

Below is the rest call , where I have expanded the column as shown below

sp.web.lists
.getByTitle("SampleList")
.items.select(
  "*",
  "CourseName/Title",
  "Attendee/Title",
  "Attendee/ID",
  "Status/Title",
  "Completed",
  "AttachmentFiles"
)
.expand("CourseName", "Attendee", "Status", "AttachmentFiles")
.filter("Status/Title eq 'Not Started'")
.top(4999)
.orderBy("Created", false)
.get()
.then((response) => {
  let getdetails = response.map((item) => new EntityListItems(item));
});

While debugging , I get undefined for Attendee on People Picker Column as shown below

Not sure if I am missing out on something and would appreciate if anyone could guide me in the right direction.

Thanks in advance

Answer 1

Change your interfaces like below:

Add new interface for holding person information:

export interface PersonItem {
    ID:Number;
    Title:String;
}

Add array of persons to your IListItem interface:

export interface IListItem {
    CourseName: {ID:Number; Title:String;};
    Attendee: PersonItem[];
    Status: {ID:Number; Title:String;};
    Completed: Date;   
}

Answer 2

Make sure that the Variable u is defined. Otherwise it would make sense that all your Attendee values are undefined

Answer 3

You could print the item to check the value in it.And check if the type of item is IListItem.