0

I am using REST API in my SPFx web-part and passing parameter in REST API but its not working as expected , there is some mistake in writing REST API within `` as parameter is not working:

export default class ReactGetItems extends React.Component<IReactGetitemsProps, IReactGetItemsState> 
{
state: IReactGetItemsState

constructor(props: IReactGetitemsProps)
{ 
super(props);

this.state = 
{ 
items: [ 
{ 

  "ImageLink":"", 
  "Template": "",  
  "DataGroupTemplate":"",
  "DataGroupTemplate_x003a_Te": "" ,
  "CurrentReportLink"   : "" ,
  "CurrentNonReportLink"    : "" ,
  "HistoricalReportLink"    : "",
  "HistoricalNonReportLink": "" ,





}],

items2: [ 
  { 
    "Title" :"" ,
    "DataGroupTemplate_x003a_Te": "" ,
    "CurrentReportLink" : "" ,
    "CurrentNonReportLink"  : "" ,
    "HistoricalReportLink"  : "" ,
    "HistoricalNonReportLink": "" ,

  }],

  items3:[ 
    { 
      "Title" :"" ,
  "DataGroupTemplate_x003a_Te": "" ,
  "CurrentReportLink"   : "" ,
  "CurrentNonReportLink"    : "" ,
  "HistoricalReportLink"    : "" ,
  "HistoricalNonReportLink": "" ,


    }]   

}; 


ShowGrid(a)
{ 
  var reactHandler = this; 
  var currentuser ='';

  jquery.ajax({ 
  url:`${this.props.siteurl}/_api/web/currentuser`,
  type: "GET", 
  headers:{'Accept': 'application/json; odata=verbose;'}, 
  success: function(resultData) { 
          currentuser=resultData.d.Email;
          no();
    reactHandler.setState({
    }); 
  }, 
  error : function(jqXHR, textStatus, errorThrown) { 
  } 
  });
  function no()
  {
  var ak =`${this.props.siteurl}/_api/web/lists/getbytitle('UserList')/items?$select=UserName/EMail,UserType&$filter=UserName/EMail eq  '${currentuser}' &$expand=UserName`;
  console.log(ak)
  jquery.ajax({ 
    url:ak,
    type: "GET", 
    headers:{'Accept': 'application/json; odata=verbose;'}, 
    success: function(resultData) { 
      console.log(resultData)  
      if(resultData.d.results.length!=0)
      {


          jquery.ajax({ 
            url: `${this.props.siteurl}/_api/web/lists/getbytitle('Templates')/items?$select=Title,CurrentReportLink,HistoricalReportLink,DataGroupTemplate/Template&$expand=DataGroupTemplate&$filter=DataGroupTemplate/Template eq '${a}'`, 
            type: "GET", 
            headers:{'Accept': 'application/json; odata=verbose;'}, 
            success: function(resultData) {   

            reactHandler.setState({ 

            items2: resultData.d.results 

            }); 

            }, 
            error : function(jqXHR, textStatus, errorThrown) { 
            } 
            });  




      }

      else
      {


          jquery.ajax({ 

            url: `${this.props.siteurl}/_api/web/lists/getbytitle('Templates')/items?$select=Title,CurrentReportLink,HistoricalReportLink,DataGroupTemplate/Template&$expand=DataGroupTemplate&$filter=DataGroupTemplate/Template eq '${a}'`, 
            type: "GET", 
            headers:{'Accept': 'application/json; odata=verbose;'}, 
            success: function(resultData) {   

            reactHandler.setState({ 

            items3: resultData.d.results 

            }); 

            }, 
            error : function(jqXHR, textStatus, errorThrown) { 
            } 
            });  



      }
    reactHandler.setState({

    }); 
    },
   error : function(jqXHR, textStatus, errorThrown) { 
    console.log("Eroror")
    } 
  }); 

    }
  } 

  public render(): React.ReactElement<IReactGetitemsProps> {
return ( 

  {this.state.items.map((items,key)=>
{    
return(
<DocumentCard styles={cardStyles} onClick={() =>this.ShowGrid(items.Template)}>
<DocumentCardTitle styles={Documentcardstyle} title={items.Template} />
<DocumentCardImage  styles={Documentcardstyle} height={100}imageFit={ImageFit.cover}  imageSrc={items.ImageLink ? items.ImageLink["Url"] : ''} />
<DocumentCardDetails>
</DocumentCardDetails>
</DocumentCard>);
  })}
)}

  • Is you variable name is a? – Ganesh Sanap Sep 11 at 4:21
  • 1
    please post the complete function. – harshal gite Sep 11 at 5:53
  • 1
    a lot of code is missing here. If as you say, "this" is not working, you should show the component or at least, say if is a react function component or class. Show that at least.... – Mikel Sep 11 at 6:21
  • 1
    Can you show the component class or the function declaration? I mean, is like this: function Welcome(props) { or like this class Welcome extends Component? because if is function component, is not this.props.siteurl. Is props.siteurl – Mikel Sep 11 at 7:58
  • 1
    Try using ${reactHandler.props.siteurl} instead of ${this.props.siteurl}. – Ganesh Sanap Sep 11 at 8:19
1

Try using below code:

url: `${this.props.siteurl}/_api/web/lists/getbytitle('Templates')/items?$select=Title,CurrentLink,HistoricalLink,DataGroupTemplate/Template&$expand=DataGroupTemplate&$filter=DataGroupTemplate/Template eq '${a}'`

Update:

Instead of ${this.props.siteurl}, try using ${reactHandler.props.siteurl}.

  • Have you tried this? Is it working for you? – Ganesh Sanap Sep 11 at 4:39
  • i tried it but not working throwing error Uncaught TypeError: Cannot read property 'props' of undefined – kumar Sep 11 at 4:50
  • url:${this.props.siteurl}/_api/web/currentuser, working url:${this.props.siteurl}/_api/web/lists/getbytitle('UserList')/items?$select=UserName/EMail,UserType&$filter=UserName/EMail eq '${currentuser}' &$expand=UserName, Uncaught TypeError: Cannot read property 'props' of undefined – kumar Sep 11 at 4:51
  • Are you using second(working) URL in same SPFx webpart? – Ganesh Sanap Sep 11 at 5:23
  • 1
    Instead of {this.props.siteurl}, try using {reactHandler.props.siteurl}. – Ganesh Sanap Sep 11 at 8:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.