How to get the current Page title >> then filter list items based on it inside my SPFx web part

Question

I have a custom list named CompanyNews which contain these fields:

• Title --> Free Text

• Topic ---> choice which allow multiple selections

Where inside the custom list, we will be adding the pages titles such as "Home","CEO Message", etc.. and the related Topics.

Then we will add the web part to a page >> so the web part should get the current page title >> then query the custom list by matching the Page title with the list's Title field and get the Topics, then show the Topics inside the web part. if nothing matches to show nothing inside the web part.

Here is my code:

But currently when I add the web part to any page it will show all the topics regardless of the page title.

Any advice?

Answer 1

You can get the page title using simple JavaScript like:

let pageTitle: string = document.title;

Then you can use it in REST endpoint like:

let pageTitle: string = document.title;
let url = `${this.props.context.pageContext.web.absoluteUrl}/_api/lists/getbytitle('CompanyNews')/items?$filter=Title eq '${pageTitle}'`;

---

If above method of getting page title is not working for you, you can get the page title using API call like:

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`;

---

Update from comments:

Below is the complete code to get page title:

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`;
let response: SPHttpClientResponse = await this.props.context.spHttpClient.get(url, SPHttpClient.configurations.v1);

let pageDetails: any = await response.json();
let pageTitle: string = pageDetails.Title ? pageDetails.Title : "";

Where pageTitle variable holds the title of site page.