Angular 5 display result from JSON response

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

did you try doing response.json() to your reponse stackoverflow.com/questions/35660306/… — Rakesh Chand
– Rakesh Chand, Commented Feb 8, 2018 at 6:57
@Rakeschand yes I did however I get "Property 'json' does not exist on type 'Object'" — RRB
– RRB, Commented Feb 8, 2018 at 7:00
@eohdev you can check it online if the response is correct or not. I checked and found it to be wrong. — Saif Ahmad
– Saif Ahmad, Commented Feb 8, 2018 at 7:01

santosh singh · Accepted Answer · 2018-02-08 07:48:54Z

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

edited Feb 8, 2018 at 7:48

answered Feb 8, 2018 at 7:42

santosh singh

28.8k27 gold badges88 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AjinkyaBhagwat · Accepted Answer · 2018-02-08 08:47:50Z

2

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

edited Feb 8, 2018 at 8:47

answered Feb 8, 2018 at 7:32

AjinkyaBhagwat

8772 gold badges7 silver badges19 bronze badges

Comments

Nabin Kumar Khatiwada · Accepted Answer · 2018-02-08 08:30:22Z

1

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.

e.g.

    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: e.g.

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

edited Feb 8, 2018 at 8:30

user9112752

answered Feb 8, 2018 at 7:19

Nabin Kumar Khatiwada

1,66621 silver badges20 bronze badges

Comments

Rakibul Haq · Accepted Answer · 2020-05-13 07:29:21Z

0

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 [{}, {}, ...]

edited May 13, 2020 at 7:29

answered Mar 7, 2019 at 22:30

Rakibul Haq

1,39625 silver badges36 bronze badges

Collectives™ on Stack Overflow

Angular 5 display result from JSON response

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related