角度5显示JSON响应的结果

时间:2018-02-08 06:54:52

标签: arrays json angular object ionic3

我正在尝试访问"列表"从[开放天气图] [1]收到的以下数据集中的参数。我基本上需要访问下面的列表层,我可以获取temp参数。

{  
"cod":"200",
"message":0.0046,
"cnt":37,
"list":[  
  {  
     "dt":1518080400,
     "main":{  
        "temp":297.81,
        "temp_min":295.457,
        "temp_max":297.81,
        "pressure":1011.64,
        "sea_level":1018.79,
        "grnd_level":1011.64,
        "humidity":71,
        "temp_kf":2.35
     },
     "weather":[  
        {  
           "id":800,
           "main":"Clear",
           "description":"clear sky",
           "icon":"01d"
        }
     ],
     "clouds":{  
        "all":0
     },
     "wind":{  
        "speed":3.76,
        "deg":322.502
     },
     "sys":{  
        "pod":"d"
     },
     "dt_txt":"2018-02-08 09:00:00"
  },
  {  
     "dt":1518091200,
     "main":{  
        "temp":298.03,
        "temp_min":296.468,
        "temp_max":298.03,
        "pressure":1010.47,
        "sea_level":1017.64,
        "grnd_level":1010.47,
        "humidity":65,
        "temp_kf":1.57
     },
     "weather":[  
        {  
           "id":802,
           "main":"Clouds",
           "description":"scattered clouds",
           "icon":"03d"
        }
     ],
     "clouds":{  
        "all":48
     },
     "wind":{  
        "speed":4.77,
        "deg":315
     },
     "sys":{  
        "pod":"d"
     },
     "dt_txt":"2018-02-08 12:00:00"
  },
  {  
     "dt":1518102000,
     "main":{  
        "temp":294.89,
        "temp_min":294.104,
        "temp_max":294.89,
        "pressure":1011.17,
        "sea_level":1018.11,
        "grnd_level":1011.17,
        "humidity":77,
        "temp_kf":0.78
     },
     "weather":[  
        {  
           "id":802,
           "main":"Clouds",
           "description":"scattered clouds",
           "icon":"03d"
        }
     ],
     "clouds":{  
        "all":44
     },
     "wind":{  
        "speed":4.91,
        "deg":287.002
     },
     "sys":{  
        "pod":"d"
     },
     "dt_txt":"2018-02-08 15:00:00"
  }
]}

我不确定如何去做。我继续收到此错误" ERROR错误:找不到不同的支持对象"

我尝试循环浏览它,如下所示

this.http.get('http://api.openweathermap.org/data/2.5/forecast?id=3362024&APPID=bbcf57969e78d1300a815765b7d587f0').subscribe(data => {
    this.items = JSON.stringify(data);
    console.log(this.items);
    for(var i = 0; i < this.items.length; i++){
      this.min = this.items[i].dt;
      console.log(this.min);
    }
  });

4 个答案:

答案 0 :(得分:2)

试试这个。确保在组件顶部导入以下导入

import 'rxjs/Rx';

import 'rxjs/add/operator/map'
     getData(){
        this.http.get('https://api.openweathermap.org/data/2.5/forecast?id=3362024&APPID=bbcf57969e78d1300a815765b7d587f0')
.map(res=>res.json()).subscribe(data => {
        this.items = data;
        console.log(this.items);
        for(var i = 0; i < this.items.list.length; i++){
          this.min = this.items.list[i].main;
          console.log(this.min);
        }
      });
      }

<强> WORKING DEMO

答案 1 :(得分:1)

考虑到你正确得到json响应:=&gt; 一种方法是: 如果您事先知道响应并且其基本结构始终相同,那么: 您可以创建一个类似于json响应的模型对象,并将json响应分配给该对象并访问任何值。

e.g。

.sticky {
      position: sticky;
      top:0;
}

另一个是:将您的json响应分配给var变量,然后访问您需要的内容: 例如

    export class TopLayer{
      fieldName1: dataType;
      fieldName2: Array<SecondLayer>;
    }
    export class SecondLayer{
      fieldName1: datatype;
      fieldName2: ThirdLayer;
    }
export class ThirdLayer{
   fieldName: datatype
}

答案 2 :(得分:1)

执行console.log(数据);并检查您从API获得的数据类型。

如果您从API获取JSON数据,那么执行JSON.stringify(数据);

如果您收到字符串中包含的JSON,请执行 JSON.parse();

在此之后,您将获得变量中的JSON,您可以按如下方式迭代它

此外,不发布您的API密钥,其他人可以使用您的API密钥登录API

this.http.get('http://api.openweathermap.org/data/2.5/forecast?id=yourId&APPID=yourapikey')
             .subscribe(data => {

             var res = JSON.parse(data); //if you are getting JSON in a string, else do res = data;

             for(var i = 0; i < res.list.length; i++){
                console.log(res.list[i].main.temp);
             }
         });

答案 3 :(得分:0)

我们还可以:

this.http.get("some-api-url")
    .subscribe((response)=>{
      for (const key in response) {
        if (response.hasOwnProperty(key)) {
          const element = response[key];
          let singleData = {id: element.id, value: element.value};
          this.dataArray.push(singleData);
        }
      }

    },
    (error)=>{
      console.log(error)
    });

当响应类似于[{}, {}, ...]