Forum Discussion

Mike Jansen's avatar
Mike Jansen
Iron Contributor
Oct 12, 2017

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": "", "Employ...
  • Maggan Wåhlin's avatar
    Maggan Wåhlin
    Oct 23, 2017

    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.

     

     

Resources