顯示來自API的json數據

Question

我正在學習ReactJs並希望顯示天氣數據。該API網址還給：

{ 
    "response": { 
    "version":"0.1", 
    "termsofService":"http://www.wunderground.com/weather/api/d/terms.html", 
    "features": { 
    "conditions": 1 
    } 
    } 
    ,"current_observation": { 
     "image": { 
     "url":"http://icons.wxug.com/graphics/wu2/logo_130x80.png", 
     "title":"Weather Underground", 
     "link":"http://www.wunderground.com" 
     }, etc. etc. 

改成了

componentDidMount() { 
     $.ajax({ 
      url: "http://api.wunderground.com/api/*****/....", 
      success: function(data){ 
       this.setState({ 
        wetter: data 
       }); 
      }.bind(this) 
     }); 
    } 

    render() { 
     return <div>{this.state.wetter.response.termsofService}</div>; 
    } 

But only get console: Uncaught TypeError: Cannot read property 'termsofService' of undefined 

我改變了它，它看起來仍然logically..but錯誤

Answer 1

而不是設置wetter至data.response的，只需將其設置爲data。

這種方式可以達到整個對象。例如： -

return <div>{this.state.wetter.response.termsofService}</div>; 
    // http://www.wunderground.com/weather/api/d/terms.html 

或

return <div>{this.state.wetter.response.features.conditions}</div>; 
    // 1 

或

return <div>{this.state.wetter.current_observation.image.url}</div>; 
    // http://icons.wxug.com/graphics/wu2/logo_130x80.png