title: Open Weather data in React using Ajax
body: <p>Given the <a href="http://openweathermap.org/current" rel="nofollow">Open Weather Map current weather data API</a>, I'm trying to pull in current weather data into my React.js app using ajax, extract the current temp value for a given city, and then render that value in my component.</p>
  
  <p>The test JSON data that I'm working with is at this url:
  <a href="http://api.openweathermap.org/data/2.5/weather?id=5391997&amp;units=imperial" rel="nofollow">http://api.openweathermap.org/data/2.5/weather?id=5391997&amp;units=imperial</a></p>
  
  <pre><code>var CityGrid = React.createClass({
    componentDidMount: function() {
      $.ajax({
        url: 'http://api.openweathermap.org/data/2.5/weather?id=5391997', 
        // ^^ this should get a variable where id=5391997 is set
        dataType: 'json',  
        success: function(data) {
            this.setState({temp: data.main.temp});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    getInitialState:function(){
      return{
        cities:[
          { 
            name: "San Francisco",
            id: 5391997,
            temp: 50,  // &lt;&lt; this should receive value from ajax call
            UTCOffset:-7,
            address: 999 Nathan Lane,
            phone: 555-5555
          },
          // 12 more city objects in this array, removed for brevity
      ]}
  },
  render: function() {
      console.log(this.state.temp); // &lt;&lt; this returns the right temp
      // for San Francisco, because I hardcoded the value into the url
      return(
          &lt;div className="city-grid"&gt;
          {this.state.cities.map(function(city,i){
            return(
              &lt;CityRow key={i} name={city.name} temp={city.temp}
              UTCOffset={city.UTCOffset} address={city.address} 
              phone={city.phone}/&gt;
            );
          })}
        &lt;/div&gt;
      );
    }
  });
  
  module.exports = CityGrid;
  </code></pre>
  
  <p>My Questions:</p>
  
  <ol>
  <li>How to extract the temp value? In my render function, console.log returns the JSON object, which means the data has been bound and can be accessed in my render function. However, when I try to get the temperature, which I expect to be something like <code>this.state.data.main.temp</code>, I get errors that "data is undefined." I would then like to be able to set this value in my cities object at               <code>id: 5391997,</code> for each of the 12 cities.</li>
  </ol>
  
  <p><strong>UPDATE</strong> ^^ This is solved: @dkurbz suggestion to set the state as temp in my ajax success method works fine for me.</p>
  
  <ol start="2">
  <li>I'm also having a challenge with how to set the url uniquely for each city. In my ajax call, there is <code>id=5391997</code>, which I would like to get from the cities objects and change my ajax url to something like 'baseURl' + this.props.id + '&amp;units=imperial'. I'm at a total loss about how to do this.</li>
  </ol>
  
  <p><strong>UPDATE</strong> ^^ This is where I'm currently stuck.</p>