spfx React > REST API > Map search results

I have a woking example where I map (rest) search results to an object like this:

export interface IReactGetItemsState{  
  items:[  
        {  
          "EmployeeName": "",  
          "EmployeeId": "",  
          "Experience":"",  
          "Location":""
        }]  
}  

export default class ReactGetItems extends React.Component<IReactGetItemsProps, IReactGetItemsState> {
  
    public constructor(props: IReactGetItemsProps, state: IReactGetItemsState){  
      super(props);  
      this.state = {  
        items: [  
          {  
            "EmployeeName": "",  
            "EmployeeId": "",  
            "Experience":"",  
            "Location":""
          }  
        ]  
      };  
    }  
-----------------------------------
jquery.ajax({
       url: `${this.props.siteurl}/_api/web/lists/getbytitle('EmployeeList')/items`,
       type: "GET",
       headers:{'Accept': 'application/json; odata=verbose;'},
       success: function(resultData) {
       reactHandler.setState({
---->       items: resultData.d.results

Now I want to do my own variant using an Ajax call using a querystring. So my result object is different

I try to map the results in this way:

items: resultData.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results.Cells

This is not working. My results remain empty.

I'm just beginning SPFX/React so I do not know how to solve this.

Can someone help me out?

Thanks, Mike

I had to create my own version of the web part to test the code. This works for me :-)

import * as React from 'react';
import styles from './HelloWorld.module.scss';
import { IHelloWorldProps } from './IHelloWorldProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { SPHttpClient, SPHttpClientConfiguration, SPHttpClientResponse, ODataVersion, ISPHttpClientConfiguration } from '@microsoft/sp-http';

export default class HelloWorld extends React.Component<IHelloWorldProps, any> {

  constructor(props) {
    super(props);
    this.state = {
      items: [],
    };
  }

  private search(): Promise<any> {

    const spSearchConfig: ISPHttpClientConfiguration = {
      defaultODataVersion: ODataVersion.v3
    };
    const clientConfigODataV3: SPHttpClientConfiguration = SPHttpClient.configurations.v1.overrideWith(spSearchConfig);

    var url = "https://xxx.sharepoint.com/sites/vmf-lab/_api/search/query?querytext='ContentType:Kvalitetsdokument'&selectproperties='Title,RefinableString05,CreatedBy,Created'&rowlimit=500"; //this.properties.siteUrl + "/_api/web/lists";
    return this.props.context.spHttpClient.get(`${url}`, clientConfigODataV3).then((response: SPHttpClientResponse) => {
      if (response.ok) {
        return response.json();
      } else {
        console.log("WARNING - failed to hit URL " + url + ". Error = " + response.statusText);
        return null;
      }
    });
  }

  componentDidMount() {
    this.search().then((response) => {
      this.setState({
        items: response.PrimaryQueryResult.RelevantResults.Table.Rows
      });
    });
  }

  public render(): React.ReactElement<IHelloWorldProps> {
    return (
      <div className={styles.helloWorld}>
        <div className={styles.container}>
          {this.state.items.map(row =>
            <div className={`ms-Grid-row ${styles.row}`}>
              <div className={`ms-Grid-col`}>
                {row.Cells.map(col =>
                  <div>{col.Key} - {col.Value}</div>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}

Hope it works.

Forum Discussion

spfx React > REST API > Map search results

Share

Resources