How to get json data from rails to react js?

Question

I have tried using ajax call to get data from rails to react but the state was not updating. When I tried to call state it's giving me an error that it is undefined. I have referred other questions in stack overflow but couldn't solve my problem. Here is my my ajax request.

fetchData: function(){
      $.ajax({
        url: '/orders',
        dataType: 'json',
        type: 'GET',
        success: function(result) {
          this.setState({orders: result});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    }

Click this link to view the error

<p><button  onClick={this.fetchData}>Filter</button></p>
            <div>
              {
                Object.keys(this.state.orders).map(function(key){
                  return <div key={ key }>{this.state.orders[key]}</div>
                }, this)
              }
            </div>

Please provide some more details about your react components and error which you are getting — WitVault
– WitVault, Commented Dec 26, 2016 at 13:39

Fabian Schultz · Accepted Answer · 2016-12-26 14:10:59Z

1

You are trying to render the order object as a string. React doesn't like that. Try only rendering a value, not the whole order object, for example like this:

class Example extends React.Component {
  constructor() {
    super();
    this.state = { orders: {
      first: { id: 311, name: 'Eric' },
      second: { id: 420, name: 'Andre' },
    }};
  }
  render() {
    return(
      <div>
      {
        Object.keys(this.state.orders).map(function(key){
          return <div key={ key }>{this.state.orders[key].id}</div>
        }, this)
      }
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>

answered Dec 26, 2016 at 14:10

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

César Landesa · Accepted Answer · 2016-12-26 14:09:41Z

0

The error says that you are trying to render something that is an object, which is not possible. The problem can be found here:

return <div key={ key }>{this.state.orders[key]}</div>

If you want to render this, then this.state.orders[key] should be either a JSX element or a value (a string for example), and it doesn't seem to be the case. I don't know what do you assign to orders with this.setState({orders: result});. If you show us the value of result we might be able to help more, but right now the problem is that this.state.orders[key] is an object.

answered Dec 26, 2016 at 14:09

César Landesa

2,6461 gold badge15 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to get json data from rails to react js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related