Get multiple lists Items via REST API

Question

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;
}

Answer 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 });
     } 
});

Answer 2

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=[];