Display value of lookup fiels on webpart

Question

I am beginner on SharePoint framework and with TypeScript.

My problem is I have a list that contains a lookup type field "categorie", When I try to get the records from the list with rest API, the lookup field value shows me undefined.

Here is my code:

I have a interface with declaration of column as string and function for get all items of SharePoint list.

import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneDropdown
} from '@microsoft/sp-property-pane';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './FaqWebPart.module.scss';
import * as strings from 'FaqWebPartStrings';
import {ISPList, ISPLists} from './GetSpListItemsWebPart'
import {  
  Environment,  
  EnvironmentType  
} from '@microsoft/sp-core-library';  

import {  
  SPHttpClient  ,
  SPHttpClientResponse
} from '@microsoft/sp-http';  


export interface ISPLists {  
    value: ISPList[];  
  }  
  export interface ISPList {  
    Title: string;  
    Question: string;  
    Response: string;  
    Categorie: {
    Title:string
  }; 
  }  


private _getListData(): Promise<ISPLists> {  
  return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('FAQ_List')/Items`, SPHttpClient.configurations.v1)  
      .then((response: SPHttpClientResponse) => {   
        debugger;  
        return response.json();  
      });  
  } 


  private _renderList(items: ISPList[]): void {  
    let html: string = '<table class="TFtable" border=1 width=40% style="border-collapse: collapse;">';  
    html += `<th>Catégories</th>`;  
    items.forEach((item: ISPList) => {  
      html += ` 
           <tr>  

          <td>${item.Categorie}</td>  
          </tr>  
          `;  
    });  
    html += `</table>`;  


    const listContainer: Element = this.domElement.querySelector('#spListContainer');  
    listContainer.innerHTML = html;  

  } 

on my webpart, the filed display undefined

Answer 1

Try using below URL:

this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('FAQ_List')/Items?$expand=Categorie&$select=Title,Question,Response,Categorie/Title`

Also, you can use PnP-JS-Core to easily work with items as below:

pnp.sp.web.lists.getByTitle("LookupList").items.select("Title", "Lookup/Title", "Lookup/ID").expand("Lookup").get().then((items: any[]) => {
    console.log(items);
});

Reference:

Retrieving Lookup Fields.