Re: spfx React > REST API > Map search results

29 Replies

Iron Contributor

Oct 19, 2017

Hi Mike,
Could you post your code? Meanwhile, you could try getbyid(<listguid>) instead of the list title in the REST query. It's a long shot... I always use Postman to test my queries, it's a Chrome app.

Mike Jansen

Iron Contributor

Oct 19, 2017

Hi Maggan Wåhlin (I should buy you a beer for your help, already).

The complete code is this:

import * as React from 'react';
import styles from './ReactGetItems.module.scss';
import { IReactGetItemsProps } from './IReactGetItemsProps';
import { escape } from '@microsoft/sp-lodash-subset';
import * as jquery from 'jquery';

export interface IReactGetItemsState{  
  items:[  
        {  
          "RefinableString10": "",  
          "CreatedBy": "",  
          "Created":""  
  
        }]  
}  

export default class ReactGetItems extends React.Component<IReactGetItemsProps, IReactGetItemsState> {
      public constructor(props: IReactGetItemsProps, state: IReactGetItemsState){  
      super(props);  
      this.state = {  
        items: [  
          {  
            "RefinableString10": "",  
            "CreatedBy": "",  
            "Created":""  
         
          }  
        ]  
      };  
    }  

 

    public componentDidMount(){
      var reactHandler = this;
      jquery.ajax({
        url: "https://Blabla.sharepoint.com/sites/bla/_api/search/query?querytext='ContentType:Test_matters'&selectproperties='RefinableString10%2cCreatedBy%2cCreated'&rowlimit=500'",
        type: "GET",
        headers:{'Accept': 'application/json;  odata=verbose;'},                     
        success: function(resultData) {
 
        reactHandler.setState({
          items: resultData.PrimaryQueryResult.RelevantResults.Table.Rows
        });
       },
       error : function(jqXHR, textStatus, errorThrown) {
       }
       });
       }

       public render(): React.ReactElement<IReactGetItemsProps> {
        return (  
   
           <div className={styles.panelStyle} > 
             <br></br>
      
             <br></br> 
             <div className={styles.tableCaptionStyle} > Demo : Retrieve SharePoint List Items using SPFx , REST API  & React JS  </div>
             <br></br>
              <div className={styles.headerCaptionStyle} > Employee Details</div>
             <div className={styles.tableStyle} >   
               
               <div className={styles.headerStyle} >  
                 <div className={styles.CellStyle}>Employee Name</div>  
                 <div className={styles.CellStyle}>Employee Id </div>  
                 <div className={styles.CellStyle}>Experience</div>  

               </div>  
               
                 
                  {this.state.items.map(function(item,key){ 
                   
                   return (<div className={styles.rowStyle} key={key}>  
                       <div className={styles.CellStyle}>{item.RefinableString10}</div>  
                       <div className={styles.CellStyle}>{item.CreatedBy}</div>  
                        <div className={styles.CellStyle}>{item.Created}</div>
      
                     </div>);  
                 })}  
                       
             </div>  
           </div>  
   
   
       );  
     }  
     
   }

The line: "items: resultData.PrimaryQueryResult.RelevantResults.Table.Rows" is the problem.

My Json return is not formatted good enough to do the binding like this.

For example, if I need the value of "RefinableString10" I have to dig deep into the json to get it:

"resultData.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results[i].Cells.results[2].Value"

My start was this example: https://gallery.technet.microsoft.com/office/Create-SPFx-Web-Part-to-d5282a5f

My query is fine. In debug I see the expected results in "resultData"

All I did was change the query to get some other results.

Maggan Wåhlin
Iron Contributor
Oct 19, 2017
I tried a similar query in Postman and now I see what you mean... To get a "clean" JSON, remove odata=verbose from the accept header. It will remove all the metadata you don't need 😊

https://blogs.office.com/en-us/2014/08/13/json-light-support-rest-sharepoint-api-released/?eu=true

Cheers 😊

Forum Discussion

Re: spfx React > REST API > Map search results

29 Replies

Resources