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>);
})}
)}
a?function Welcome(props) {or like thisclass Welcome extends Component? because if is function component, is notthis.props.siteurl. Isprops.siteurl${reactHandler.props.siteurl}instead of${this.props.siteurl}.