0

I am trying to get weather (wx) info from Region Weather list and and wxicon from another list. For List from Region Weather I can get it, For List from wxicon I could not get it. I attempted to use the same qurl in getIcon(), but my variable shows undefine.

What would caused it?

  • function to get wx info

private getWx(){
     var qurl;
                qurl="/_api/web/lists/getbytitle('Region Weather')/items?$select=*,AttachmentFiles&$expand=AttachmentFiles/Title&$top=1";
   const opt: ISPHttpClientOptions = { headers: { 'Content-Type': 'application/json;odata=verbose' } };
   this.props.SPHttpClient.get(this.props.pagecontext.web.absoluteUrl + qurl, SPHttpClient.configurations.v1,opt)
   .then((response: SPHttpClientResponse) => {
       response.json().then((json: any) => {
        for(let i=0;i<json.value.length;i++){
            var icon;
           // icon=this.getIcon(json.value[i].Conditions);
            icon="https://icons-for-free.com/iconfiles/png/512/forecast+partly+cloudy+weather+icon-1320196484400215944.png";
          this.data.push({
             city:json.value[i].Title,
             condition:json.value[i].Conditions,
             temp:json.value[i].Temperature,
             atemp:json.value[i].Apparent_x0020_Temperature,
             unit:json.value[i].Temperature_x0020_Unit,
             icon:icon,

           });
            this.forceUpdate();

          }
          //this.setState({wx:this.data});

       });
      });

  }

  • function to get wx icon from another list
private getIcon(condition){
    var iconq;
    var temp;

iconq="/_api/web/lists/getbytitle('wxicon')/items?$select=*,AttachmentFiles&$expand=AttachmentFiles/Title&$top=1";
  const opt: ISPHttpClientOptions = { headers: { 'Content-Type': 'application/json;odata=verbose' } };
   this.props.SPHttpClient.get(this.props.pagecontext.web.absoluteUrl + iconq, SPHttpClient.configurations.v1,opt)
   .then((response: SPHttpClientResponse) => { debugger;
    response.json().then((json: any) => {
            for(let i=0;i<json.value.length;i++){
           debugger;
          temp=json.value.Title ;
            }
       });
      });
      debugger;
 return temp;
}
1

Inside for loop in second SharePoint REST call you need to pass the index (i) to get the Title, like below:

temp = json.value[i].Title;

Also, as you are using $top=1 so it will return just one item at a time. So, you don't have to use for loop in both cases. In Success function, you use it like:

response.json().then((json: any) => {
     if(json.value && json.value.length){
       this.data.push({
           city: json.value[0].Title, 
           condition:json.value[0].Conditions
           ... 
       });
     } 
});

And in second call:

var temp = [];

... 


response.json().then((json: any) => {
     if(json.value && json.value.length){
       temp.push({ TempTitle: json.value[0].Title });
     } 
});
| improve this answer | |
  • Thanks Ganesh for your reply I attempted 1. remove for loop in api keep $top=1 temp = json.value.Title; I used debugger and see that it fetches nothing. – Random I.T Feb 8 at 11:55
  • Is there any item in your wxicon list? If it returns one item in Success then you need to use json.value[0].Title in order to get the Title of returned item. – Ganesh Sanap Feb 8 at 12:09
  • yes there are items, I have used another work around. get a function read everything in the list, store in a array. so when I go to getWx() I do a array search to looking for the icon url and display it – Random I.T Feb 8 at 12:11
  • Great, I am glad you got it working. Please accept it as an answer if it helped you in any way. – Ganesh Sanap Feb 8 at 12:13
  • 1
    Ganesh, thanks for your reply. It is not because of json.value[0].Title that hinder the process. It was unable to call a get API function within a function. – Random I.T Feb 8 at 12:21
0

I was unable to solve this problem, I suspect it is due to function calling another function caused error. I attempted to put debugger, if there is value just a mouse over would show but it didn't.

response.json().then((json: any) => {
     if(json.value && json.value.length){ debugger; // it skipped here
       this.data.push({
           city: json.value[0].Title, // tried json.value.Title, it doesnt work
           condition:json.value[0].Conditions // tried json.value.Conditions, it doesnt work
          debugger; //it skipped here
           ... 
       });
     } 
});
 debugger; //it  arrived here with this.data undefined.

An Alternative Work around is as follows:

  • call a function to read wxicons lists,store icons,url in this.icons array,
  • use .findindex to search for the conditions from getWx() in this.icons
  • display data

Get All data from list, store in an array

private getIcon(){
    var iconq;


iconq="/_api/web/lists/getbytitle('wxicon')/items?$select=*,AttachmentFiles&$expand=AttachmentFiles/Title";
  const opt: ISPHttpClientOptions = { headers: { 'Content-Type': 'application/json;odata=verbose' } };
   this.props.SPHttpClient.get(this.props.pagecontext.web.absoluteUrl + iconq, SPHttpClient.configurations.v1,opt)
   .then((response: SPHttpClientResponse) => {
      response.json().then((json: any) => {
            for(let i=0;i<json.value.length;i++){
                    this.icons.push({
                            name:json.value[i].icon,
                            url:json.value[i].AttachmentFiles[0].ServerRelativeUrl,
                    });
            }
       });
    });

      this.forceUpdate();


}

Search for Conditions from getWx() in this.icon array

private getWx(){
     var qurl;
                qurl="/_api/web/lists/getbytitle('Region Weather')/items?$select=*,AttachmentFiles&$expand=AttachmentFiles/Title&$top=1";
   const opt: ISPHttpClientOptions = { headers: { 'Content-Type': 'application/json;odata=verbose' } };
   this.props.SPHttpClient.get(this.props.pagecontext.web.absoluteUrl + qurl, SPHttpClient.configurations.v1,opt)
   .then((response: SPHttpClientResponse) => {
       response.json().then((json: any) => {
        for(let i=0;i<json.value.length;i++){
          var icon;

         //this.icons holds the icons's condition name and url
         //search the conditions in the this.icon array and return the url
         var index
         var toSearch = json.value[i].Conditions;
         index = this.icons.findIndex(x => x.name === toSearch);
         if(index!=-1){
          icon=this.icons[index].url;
         }else{
          icon="https://.sharepoint.com/yo/Shared%20Documents/unkown.png";
         }




          this.data.push({
             city:json.value[i].Title,
             condition:json.value[i].Conditions,
             temp:json.value[i].Temperature,
             atemp:json.value[i].Apparent_x0020_Temperature,
             unit:json.value[i].Temperature_x0020_Unit,
             icon:icon,

           });
            this.forceUpdate();

          }
          //this.setState({wx:this.data});

       });
      });

  }

Define this below export default class after constructor definition

private icons:any=[];
| improve this answer | |

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.