title: Making RESTful API call from React.js
body: <p>I am doing a POC for isomorphic JavaScript application to render HTML from the server side. The POC is working with simple HTML, but I want to make an API call and get the JSON response and send to the render function. I tried various ways but it is not working.</p>
  <p>What am I missing? I am very new to React.js.</p>
  <pre><code>loadCategoriesFromServer: function() {
          var self = this;
  
  // get walking directions from central park to the empire state building
      var http = require(&quot;http&quot;);
      url = &quot;api url here&quot;;
          var request = http.get(url, function (response) {
              // data is streamed in chunks from the server
              // so we have to handle the &quot;data&quot; event    
              var buffer = &quot;&quot;, 
                  data,
                  route;
  
              response.on(&quot;data&quot;, function (chunk) {
                  buffer += chunk;
              }); 
  
              response.on(&quot;end&quot;, function (err) {
                  
                data = JSON.parse(buffer);
                  
                //console.log(data.d);
                //console.log(data.d.Items);
                  self.setState({
                      categories: data.d.Items
                  });
              }); 
          });
      }, // load from server end
  
      getInitialState: function() {
          return { categories: [] };
      },
  
      componentWillMount: function() {
          console.log(&quot;calling load categories&quot;)
          this.loadCategoriesFromServer();
      },
  render: function () {
          
          //console.log(&quot;data&quot;);
          //console.log(this.state.categories);
        
          var postNodes = this.state.categories.map(function (cat) {
            console.log(cat);
          });
      
          return (
            &lt;div id=&quot;table-area&quot;&gt;
               //i want to paint the data here..
            &lt;/div&gt;
          )
        }
  
    });
  </code></pre>