Scribd
Upload
19 views1 page

Fetching Data From Sharepoint List

The document outlines the steps to fetch data from a SharePoint list using a React component. It includes importing necessary files, implementing the componentDidMount lifecycle method to retrieve specific fields from the list, initializing state variables, and displaying the fetched data in an input field. The example demonstrates how to handle asynchronous data fetching and state management in React.

Uploaded by

Akash K
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views1 page

Fetching Data From Sharepoint List

The document outlines the steps to fetch data from a SharePoint list using a React component. It includes importing necessary files, implementing the componentDidMount lifecycle method to retrieve specific fields from the list, initializing state variables, and displaying the fetched data in an input field. The example demonstrates how to handle asynchronous data fetching and state management in React.

Uploaded by

Akash K
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

Fetching data from Sharepoint List and Displaying it.

1-- import { Sp } from "./Environment/Env";

2-- Add Environment file into components.

3-- Write ComponentDidMount to fetch the data from the sharepoint list eg:

public async componentDidMount() {


await Sp.lists.getByTitle("Name of your List").items.select("Title",
"User_Name", "Business_Unit", "Manager", "Organization_Info",
"BU_Head").get().then((res: any) => {
this.setState({ Title: res[0].Title });
this.setState({ Manager: res[0].Manager });
this.setState({ User_Name: res[0].User_Name });
this.setState({ Business_Unit: res[0].Business_Unit });
this.setState({ Organization_Info: res[0].Organization_Info });
this.setState({ BU_Head: res[0].BU_Head });
console.log(res[0].Title);
console.log(res[0].Organization_Info);
console.log(res)

}).catch((err) => {
console.log(err);

})
console.log(this.state.Title)
console.log(this.state.Manager)

4-- in this.state under export default initialize the value name eg:
export default class Award extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = {

EmpName: "",

};
}

5-- pass the value to the input field eg:

<div className="col">
{this.state.EmpName}
<Body1> </Body1>
</div>

You might also like