SPFX- Lookup column value

Question

I'm retrieving data from a SharePoint list and I'm facing some issues while getting values from lookup column. I was able to successfully pull in the 'Title' column which is a single line of text, but for the Lookup column is not able to be get it.

export interface IGetListItemsWebPartProps {
  description: string;
}

export interface ISPListCustomers{
  value:ISPListCustomerItem[];
}

export interface ISPListCustomerItem{
  ID:string;
  Title:string;
  Description:string;
  LookupColumn:{
    Tilte:string;
  }
  Status:string;
}

const listName ="Incident List";
export default class GetListItemsWebPart extends BaseClientSideWebPart<IGetListItemsWebPartProps> {

  public render(): void {

    this.domElement.innerHTML = `

      <div class="${ styles.container }">
        <div id="spListContainer">
        </div>
      </div>
    `;

     this._renderListDataAsync();
}

private _getListCustomerData():Promise<ISPListCustomers>
  {
      return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl+
    `/_api/web/lists/GetByTitle(${listName})/Items`,SPHttpClient.configurations.v1).
        then((responseListCustomer:SPHttpClientResponse)=>{
          debugger;
          return responseListCustomer.json();
        });
  }

private _getListCustomerPnp():Promise<ISPListCustomerItem[]>
{
  const url : any = new URL(window.location.href);
  const siteName = url.searchParams.get("site");
  return pnp.sp.web.lists.getByTitle('Incident List').items.
        filter(`LookupColumn/Title eq '${siteName}' `).top(3).orderBy("Modified",false).select("ID","Title","Description",
        "Status","LookupColumn/Title","LookupColumn/ID").expand
        ("LookupColumn").get().then
        (
        (response:any[])=>{
          return response;
         });
}

private _renderListCustomer(items:ISPListCustomerItem[]):void
{
  const hasPermission:boolean = this.context.pageContext.web.permissions.hasPermission(SPPermission.manageWeb);
  var groupContainer : Element = this.domElement.querySelector('#addNewItem');
  // groupContainer.setAttribute("style", "{display:none;}");
  let addNew:string =`<td><div id=addNewItem> Ad New Item</div></td>`;

  let html:string=`<table width='100%' border=1><tr><td>Register Alerts</td> '${hasPermission?addNew:""}' </tr></table><table width='100%' border=1>`;

  html+=`<thead><th>Incident</th><th>Description</th><th>Impacted Sites</th><th>Status</th>`+
  `</thead><tbody>`;
  debugger;
  items.forEach((item:ISPListCustomerItem)=>
  {
  const listDispURL = this.context.pageContext.web.absoluteUrl+`/lists/${listName}/DispForm.aspx?ID=${item.ID}'`;

  html+= `<tr>
    <td><a href='${listDispURL}'> ${item.Title}</a></td>
    <td>${item.Description}</td>
    <td>${item.LookupColumn}</td> // Getting undefined here
    <td>${item.Status}</td>
    </tr>`;
  });
  html+=`</tbody></table>`;
  const listContainer:Element=this.domElement.querySelector("#spListContainer");
  listContainer.innerHTML=html;

}

Answer 1

Use this:

<td>${item.LookupColumn.Title}</td>

//add .Title or .Tilte if that's the correct one.