来自 JSON 响应的 Angular 5 显示结果

Question

I am trying to access the "list" parameter in the following data set received from [Open weather map][1]. I basically need to access the list layer in the below set where I can get the temp parameter.

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

I am not sure as to how to go about it. I keep on getting this error "ERROR Error: Cannot find a differ supporting object"

I tried looping through it like below

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

Answer 1

Do console.log(data); and check what kind of data you are getting from API.

If you are getting JSON data from API, then do not do JSON.stringify(data);

If you are getting JSON contained in string then do JSON.parse();

After this you will get JSON in a variable and you can iterate it as follows

Also, do not post your api key in question , others can hit API using your api key

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

Answer 2

Try this. Make sure you import following import on top of the component

import 'rxjs/Rx';

or

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

Answer 3

Considering you are correctly getting json response:=> One way is : if you know response in advance and its basic structure is always same then: you can create a model object similar to the json response and assign the json response to that object and access any values.

eg

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

another is: assign your json response to a var variable then access what you need: eg

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

Answer 4

We can also do:

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

When the response is like [{}, {}, ...]