Skip to main content
2 of 4
added 12 characters in body; edited tags
Ganesh Sanap - MVP
  • 46.4k
  • 22
  • 31
  • 63

Display value of lookup fiels on webpart

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;  
    Reponse: string;  
    Categorie: 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

khadi
  • 67
  • 2
  • 8