none
SharePoint framework React search example > howto map data using a different query RRS feed

  • Question

  • I'm trying to build my own SPFX app using this example:

    Spfx react search example

    To start I want to use a differen query. In the "ReactGetItems.tsx" file I changed this:

    url: `${this.props.siteurl}/_api/web/lists/getbytitle('EmployeeList')/items`

    To:

     url: "https://Bla.sharepoint.com/sites/bla/_api/search/query?querytext='ContentType:TEST_matters'&selectproperties='RefinableString10%2cCreatedBy%2cCreated'&rowlimit=500'"

    The query is fine and returns the expected results. Obviously the format of the returned json is different so the binding of the results must be different. In the example it is like this:

     reactHandler.setState({
           items: resultData.d.results
           });

    I try to do it like this:

     reactHandler.setState({
              items: resultData.PrimaryQueryResult.RelevantResults.Table.Rows
            });

    I tried some other variants but none of the are working.

    I'm new to React and the SharePoint framework so any help would be very appreciated.

    Monday, October 23, 2017 9:42 AM

Answers

All replies

  • My object is like this:

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

    I map it to my returned json like this:

     reactHandler.setState({
              items: resultData.PrimaryQueryResult.RelevantResults.Table.Rows
            });

    To retrieve the values I do:

    {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>

    This is not working because the values are "deeper" away in the object. What I would like to do is this:

     

    {this.state.items.map(function(item,key){ 
                       
                       return (<div className={styles.rowStyle} key={key}>  
                           <div className={styles.CellStyle}>{item.Cells[2].value}</div>  
                           <div className={styles.CellStyle}>{item.Cells[3].value}</div>  
                            <div className={styles.CellStyle}>{item.Cells[4].value}</div>

    I'm not allowed to do that because "Cells does not exist on type....."

    I think I must define my object in another way or something. 


    • Edited by Sp2010_Mike Monday, October 23, 2017 12:39 PM
    Monday, October 23, 2017 12:37 PM
  • You have asked in the wrong forum. This forum is for questions and discussions about the TechNet Wiki.

    I would ask in one of these forums:

    https://social.technet.microsoft.com/Forums/en-US/home?forum=sharepointsearch

    https://social.technet.microsoft.com/Forums/en-US/home?forum=sharepointsearchprevious


    Richard Mueller - MVP Enterprise Mobility (Identity and Access)

    Monday, October 23, 2017 6:38 PM
    Moderator