1

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

2

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.

  • I do it, it's work, but its display [object Object] instead of the real value – khadi Aug 14 at 14:22
  • i find solution, i replace Categorie: string; Categorie: { Title:string }; – khadi Aug 14 at 14:42
  • Great. Glad it worked for you. – Ganesh Sanap Aug 14 at 14:47

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.