显示来自API的json数据

Question

I am learning ReactJs and want to display weather data. The API Url gives back:

{
  "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.

Changed it to

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

I changed it and it looks logically..but still errors

Answer 1

Instead of setting wetter to data.response , just set it to data .

This way you can reach the entire object. Eg:

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

or

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

or

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