JSON响应的Angular 5显示结果

Posted 2023-02-22

【中文标题】JSON响应的Angular 5显示结果

【英文标题】：Angular 5 display result from JSON response

【发布时间】：2018-07-18 15:51:12

【问题描述】：

我正在尝试访问从 [Open Weather map][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"
  
]

我不知道该怎么做。我不断收到此错误“错误错误：找不到不同的支持对象”

我尝试像下面这样循环遍历它

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);
    
  );

【问题讨论】：

您是否尝试对您的回复response.json() 进行***.com/questions/35660306/…

您的JSON 回复有误。

@saifahmad 回复来自openweathermap.org/api

@Rakeschand 是的，我做到了，但是我得到“属性 'json' 在类型'对象'上不存在”

@eohdev 您可以在线查看响应是否正确。我查了一下，发现不对。

【参考方案1】：

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

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

【参考方案2】：

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

如果您从 API 获取 JSON 数据，则不要执行 JSON.stringify(data);

如果您将 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】：

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

例如

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

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

    var x = response;
         var list = x.list;

【参考方案4】：

我们也可以这样做：

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

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

当回复类似于[, , ...]时