title: JQuery cannot read property part of a JSON
body: <p>I have a React component which loads a JSON from the backend and presents them in a tabular format.</p>
  
  <pre><code>var App = React.createClass({
  
    loadMoviesFromServer: function () {
      var self = this;
      $.ajax({
        url: "http://localhost:9000/movies"
      }).then(function (data) {
          console.log(data);
        self.setState({movies: data._embedded.movies});
      });
    },
  
    getInitialState: function () {
      return {movies: []};
    },
  
    componentDidMount: function () {
      this.loadMoviesFromServer();
    },
  
    render() {
      return ( &lt;MovieTable movies={this.state.movies}/&gt; );
    }
  });
  
  
      ReactDOM.render(&lt;App /&gt;, document.getElementById('root') );
      &lt;/script&gt;
  </code></pre>
  
  <p>Below is the REST API Response :</p>
  
  <pre><code>[{"id":1,"name":"Sholay","day":"Monday","description":"Action"},{"id":2,"name":"Tomb Raider","day":"Monday","description":"Action"},{"id":3,"name":"Toby Maguire","day":"Tuesday","description":"Action"}]
  </code></pre>
  
  <p>However I get the error :</p>
  
  <pre><code>Deferred exception: Cannot read property 'movies' of undefined TypeError: Cannot read property 'movies' of undefined
      at Object.eval (eval at transform.run (https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js:4:28099), &lt;anonymous&gt;:97:46)
  </code></pre>
  
  <p>Should I reformat the JSON ? Or should I change the expected element in Jquery.</p>
  
  <p>thanks</p>