Forum Discussion

Muralikrishna1845's avatar
Muralikrishna1845
Copper Contributor
Jul 13, 2023

how to get SP site contents list ?but getting blank values from SP in SPFX webpart

Hi Team,

I am trying to get SP Site contents list (Get SP lists) using React component framework but getting blank

Please find the below code file

//this is WebPart Render method File 
public render(): void
{
    const element: React.ReactElement<IGetSpListsProps> = React.createElement(
      GetSpLists,
      {
        description: this.properties.description,
        websiteUrl: this.context.pageContext.web.absoluteUrl
      });
     ReactDom.render(element, this.domElement);
}

//Component Interface file

export interface IGetSpListsProps {
  description: string;
  websiteUrl: string;
}
//Component TSX file
export interface IGetSpListsState{
  sitecontents: [{"Lists":""}]
}

export default class GetSpLists extends React.Component<IGetSpListsProps, IGetSpListsState> {
    static siteurl:string =""; //static member variable
    public constructor (props :IGetSpListsProps, state:IGetSpListsState ){
     super(props);
     this.state={sitecontents: [{"Lists":""}]};
      GetSpLists.siteurl=this.props.websiteUrl;
    }
    
    public componentDidMount() {
      let reactcontexthandiler= this;
      jquery.ajax({
        url: `${GetSpLists.siteurl}/_api/web/lists?select=Title&$filter=Hidden eq true`,
        type:"GET",
         headers:{'Accept': 'application/json;odata=verbose;'},
         success : function (resultData){
          reactcontexthandiler.setState({sitecontents: resultData.d.results});
         },
         error: function (jqXHR, textStatus, errorthrown){
          }
        });
    }
    
    public render(): React.ReactElement<IGetSpListsProps> {
      return (
      <div>
        <ol>
        {
          this.state.sitecontents.map(function(mylists,mylistitemkey){
            return(
              <li>
              <span>{mylists.Lists}</span>
              </li>);
              })
            }
      </ol>
      </div>
    );}}

Please find the output which it shows for the above piece of code

 

 

 

please assist me why it shows blank

 

No RepliesBe the first to reply

Resources