1

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;

}
  • You've probably already noticed this, in the months since you posted. But, in your ISPListCustomerItem interface, the LookupColumn object has an incorrect spelling for the Title property. (You have Tilte...) Yet, your _getListCustomerPnp method is expecting the property name to be spelled Title. – stackleit Aug 7 at 17:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.