Getting SharePoint List Data in SPFx WebPart using JavaScript and REST API

In this blog, we’ll explore how to use the SharePoint REST API within a SharePoint Framework (SPFx) webpart to fetch and display data from SharePoint lists.

To make this process easier, we’ll walk through the setup, REST calls, and rendering logic step by step.

Prerequisites

Before starting, ensure you have:

• Node.js installed

• Yeoman generator for SPFx

• A working SharePoint Online tenant

• Basic knowledge of JavaScript and REST API

Step 1: Set Up SPFx Project

Start by creating a new SPFx web part project using Yeoman generator.

Run this command in your terminal

yo @microsoft/sharepoint

• Choose WebPart as the component type

• Provide a name and description

• Select framework (No JavaScript framework for plain JS or React)

Step 2: Configure WebPart Context

Use the page context to access SharePoint site details.

• Import this line in your ISPFxProjectProps.ts file

import { WebPartContext } from "@microsoft/sp-webpart-base";

Final code on ISPFxProjectProps.ts file will look like this:

import { WebPartContext } from "@microsoft/sp-webpart-base";

export interface ISPFxProjectProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
  userDisplayName: string;
  context: WebPartContext
}

Step 3: Write REST API Call

Fetch list data using JavaScript REST API methods.

• Import in SPFxProject.tsx file

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

• Use to build REST API URLs: this.props.context.pageContext.web.absoluteUrl

• Construct endpoint: /_api/web/lists/getbytitle('ListName')/items

• Add headers: 'Accept': 'application/json;odata=nometadata', 'odata-version':''

Final function to get Data from SharePoint list will look like this:

public getData(){
    let URL= `${this.props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('CustomListName')/items`
    this.props.context.spHttpClient.get(URL,
      SPHttpClient.configurations.v1,
      {
        headers:{
          'Accept':'application/json;odata=nometadata',
          'odata-version':''
        }
      })
      .then((resp:SPHttpClientResponse):any =>{
        return resp.json();
      },(error:any)=>{
      console.log(error);
    })
    .then((response:any)=>{
      console.log(response);
      this.setState({employeesData:response});
    })
  }

Step 4: Process and Render Data

Display fetched list items in your web part UI.

• Loop through this.state.employeesData

• Create HTML elements dynamically

• Append them to the DOM

Final code inside webpart render will look like this:

<table >
     <thead>
         <tr>
            <th >ID</th>
            <th >Name</th>
            <th >Department</th>
              </tr>
            </thead>
            <tbody>
              {this.state.employeesData.map((emp: any) => {
                return (
                  <tr key={emp.Id}>
                    <td >{emp.Id}</td>
                    <td >{emp.Title}</td>
                    <td >{emp.Department}</td>
                  </tr>
                )
              })}
            </tbody>
       </table>

Final Step: Build and Run the WebPart

Start the local workbench: Use the gulp command to serve your web part:

gulp serve

Add your web part

• In the SharePoint workbench, click Add a Web Part.

• Search and Select your SPFxProjectWebPart (or the name you gave it).

• The web part will render and fetch data from your SharePoint list using the REST API.

Conclusion

By following these steps, you can easily integrate SharePoint list data into your SPFx web parts using JavaScript and the REST API. This approach makes your web parts more dynamic, interactive, and useful for end-users.