Rendering data from an array of objects

Question

I have integrated the search filter and retrieved the json data( array of objects ) using the post method based on the search term. The json output is given below:

[
  {"taxi_code":"CT0001","class":"0"},
  {"taxi_code":"CT0002","class":"0"},
  {"taxi_code":"CT0003","class":"0"}
]

But the json data is not rendered to the DisplayTable component even using map method. What i did wrong?? Using console.log(<DisplayTable data={queryResult} />), i got this type of output: Object { props={...}, _store={...}, $$typeof=Symbol {}, more...}

class Results extends Component
{
      constructor(props){
                 super(props);
                 this.state={searchTerm:''};       
      }
      render(){
          return(<div id="results" className="search-results">
                  {this.props.data}
                  <SearchInput className="search-input" onChange={e=>this.searchUpdated(e)} />
                 </div>);
      }
      searchUpdated (e) {
          this.setState={searchTerm: e};
          var queryResult;
          axios.post(config.api.url + 'public/getAttributesbyname', {'searchTerm':e,'name':this.props.data})
              .then(response => {

               var queryResult = response.data;
              render()
              {

              return (<DisplayTable data={queryResult}/>);
              }
              })
              .catch(response => {

              });
      }
  }

 class DisplayTable extends Component
 {
    render()
    {
        return this.props.data.map((alldata)=> {
            return <div className="station">{alldata.taxi_code}</div>;
        });
    }
 }

Please, read best practices. This type of coding is horrible. — Tugrul
– Tugrul, Commented Aug 1, 2016 at 11:40

Oleksandr T. · Accepted Answer · 2016-08-01 11:54:58Z

You have several mistakes in your code,

You can't return values from asynchronous function(axios.post)
this.setState is method and you have to call it this.setState() but not assign value to it

I think in this case you don't need handle state from input field searchTerm, you can get value from input and use it., however you should handle state for data which you get from server.

I've refactored your example, and now it looks like this

class Results extends Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  render(){
    return <div id="results" className="search-results">
      <DisplayTable data={ this.state.data } />
      <SearchInput 
        className="search-input" 
        onChange={ e => this.searchUpdated(e) } 
      />
    </div>;
  }

  searchUpdated (e) {
    axios
      .post(config.api.url + 'public/getAttributesbyname', {
        searchTerm: e.target.value, 
        name: this.props.data 
      })
      .then(response => {
        this.setState({ data: response.data });
      })
     .catch(response => {});
  }
}

class DisplayTable extends Component {
  render() {
    const stations = this.props.data.map((alldata, index) => {
      return <div className="station" key={ index }>{ alldata.taxi_code }</div>;
    });

    return <div>{ stations }</div>
  }
}

Collectives™ on Stack Overflow

Rendering data from an array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related