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 '19 at 4:21
  • 1
    please post the complete function. – harshal gite Sep 11 '19 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 '19 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 '19 at 7:58
  • 1
    Try using ${reactHandler.props.siteurl} instead of ${this.props.siteurl}. – Ganesh Sanap Sep 11 '19 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}.

| improve this answer | |
  • Have you tried this? Is it working for you? – Ganesh Sanap Sep 11 '19 at 4:39
  • i tried it but not working throwing error Uncaught TypeError: Cannot read property 'props' of undefined – kumar Sep 11 '19 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 '19 at 4:51
  • Are you using second(working) URL in same SPFx webpart? – Ganesh Sanap Sep 11 '19 at 5:23
  • 1
    Instead of {this.props.siteurl}, try using {reactHandler.props.siteurl}. – Ganesh Sanap Sep 11 '19 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.