显示来自 API 的 json 数据答案

【问题标题】：Display json data from API显示来自 API 的 json 数据
【发布时间】：2016-04-24 12:00:16
【问题描述】：

我正在学习 ReactJs 并想显示天气数据。 API Url 回馈：

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

我更改了它，它看起来合乎逻辑..但仍然有错误

【问题讨论】：

能否请您更新已显示更清晰的 json 数据？即data = { } 带有正确格式的大括号

标签： json reactjs

【解决方案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

【讨论】：