Forum Discussion
spfx React > REST API > Map search results
- 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.
An example...
var reactModule = React.createClass({
getInitialState:function(){
},
render: function() {
return (
<div>
... content here
</div>
);
},
componentDidMount: function() {
var ajaxSuccess=this.ajaxSuccess;
$.ajax({
type: "POST",
url:`${this.props.siteurl}/_api/web/lists/getbytitle('EmployeeList')/items`,
more props here,
success: ajaxSuccess
});
},
ajaxSuccess:function(e){
//e is the result. update state here.
}
});
- Mike JansenOct 12, 2017Iron Contributor
Thanks again Maggan Wåhlin.
I'll give it a try.
- Maggan WåhlinOct 12, 2017Iron ContributorRead up on the react component lifecycle, it helped me a lot.
http://busypeoples.github.io/post/react-component-lifecycle/- Mike JansenOct 12, 2017Iron Contributor
Things are a bit more clear but my main issue is the mapping of my query results to the "Item" object.
I try:
items: resultData.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results.Cells
But I need to solve it some other way. Still do not know howto.... sorry.
An example would be great....