How to call a REST API endpoint inside TypeScript and get its results

Question

Inside my React SPFx web part, i need to get the current SharePoint Page Title, to do so i need to run this API Call:-

let listTitle: string = this.props.context.pageContext.list.title;
let pageItemId: number = this.props.context.pageContext.listItem.id;

let url = `${this.props.context.pageContext.web.absoluteUrl}/_api/lists/getbytitle('${listTitle}')/items(${pageItemId})?$select=ID,Title`;

so how i can call the above URL and get the string it should return?

Thanks

I tried the following but the function will return null

private GetPageTitle()
  { let listTitle: string = this.props.context.pageContext.list.title;
    let pageItemId: number = this.props.context.pageContext.listItem.id;
    
    let url = `${this.props.context.pageContext.web.absoluteUrl}/_api/lists/getbytitle('${listTitle}')/items(${pageItemId})?$Title`;
    return (RelatedTopics.getSPData(this.client, url));

  }

Matej · Accepted Answer · 2021-11-29 14:32:38Z

1

you can use either pnp js package to make Sharepoint Api call or build in spHttpClient.

PNP JS: https://pnp.github.io/pnpjs/sp/items/

import { sp } from '@pnp/sp';
let url = await sp.web.lists.getByTitle(listTitle).items.getById(pageItemId).select('ID','Title').get();

spHttpClient:

import { ISPHttpClientOptions, SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
let url: string = '[endpoint url]';
this.props.context.spHttpClient.get(url, SPHttpClient.configurations.v1, httpClientOptions).then((response: SPHttpClientResponse) => {
if (response.ok) {
 return response.json();
} else {
 reject(error);
}});

answered Nov 29, 2021 at 14:32

Matej

4163 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matej Over a year ago

Is my answer helpful?

Collectives™ on Stack Overflow

How to call a REST API endpoint inside TypeScript and get its results

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related