How to parse Json response in Angular 4

Question

Hi i am beginner in ionic with angular app development and using below code for Http calls and i got response in json format, Now i want show response title in list,I tried lot but not getting result can some one help me please

Api url:

https://www.reddit.com/r/gifs/top/.json?limit=2&sort=hot

home.ts:

this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=2&sort=hot',{ observe:'response'}).subscribe( res => { console.log(res) ;
          var info=JSON.parse(JSON.stringify(res));
          this.countries = info.data.children;
      });

home.html:

<ion-content padding>
  <ion-list>
  <ion-item *ngFor="let c of countries">
    <h2>{{c.title}}</h2>
  </ion-item>
</ion-list>
</ion-content>

Did you check the ionic documentation before asking? ionicframework.com/docs/native/http — Capricorn
– Capricorn, Commented Jun 19, 2018 at 7:25

Pardeep Jain · Accepted Answer · 2018-06-19 09:23:25Z

3

You are using the wrong key to fetch value in HTML part, the code should be -

<h2>{{c.data.title}}</h2>

instead of

<h2>{{c.title}}</h2>

also why are you using parse then stringify , just simply assign value using json() like this -

this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=2&sort=hot', {observe:'response'}).subscribe( res => { 
      console.log(res) ;
      let response = res.body;
      this.countries = response.data.children;
    });

Working Example

Update

If you are using httpClient then no need to use json() also remove {observe:'response'} as there is no need of this in your use case.

edited Jun 19, 2018 at 9:23

answered Jun 19, 2018 at 7:18

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

10 Comments

AbhiRam Over a year ago

this.countries = res.data && res.data.children; line giving error --> data does not exist in HttpResponse<object>

Pardeep Jain Over a year ago

Try to console it before assigning to the variable

AbhiRam Over a year ago

your seen my response in api Url?,i want to show title in list but your answer showing me errors

AbhiRam Over a year ago

please try to elaborate your code because i am begginer

Pardeep Jain Over a year ago

@AbhiRam Check my updated answer with working example

|

Parvej Mallick · Accepted Answer · 2018-06-19 07:25:42Z

0

Use rxmap

import 'rxjs/add/operator/map';

this.http.post('https://www.reddit.com/r/gifs/top/.json?limit=2&sort=hot',{ observe:'response'}).map(res => res.json()).subscribe(data => {
   console.log(data.data);
});

answered Jun 19, 2018 at 7:25

Parvej Mallick

4651 gold badge9 silver badges13 bronze badges

3 Comments

Capricorn Over a year ago

That's a post request, the question asks for a get request

Parvej Mallick Over a year ago

this.http.get('reddit.com/r/gifs/top/.json?limit=2&sort=hot',{ observe:'response'}).map(res => res.json()).subscribe(data => { console.log(data.data); });

Jess Over a year ago

Module not found: Error: Can't resolve 'rxjs/add/operator/map'

keval nayak · Accepted Answer · 2018-06-19 07:36:36Z

0

try with this

this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=2&sort=hot',{ observe:'response'}).subscribe( res => { console.log(res) ;          
      this.countries = info['data'].children;
  });

answered Jun 19, 2018 at 7:36

keval nayak

2541 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to parse Json response in Angular 4

Api url:

home.ts:

home.html:

3 Answers 3

Working Example

Update

10 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Api url:

home.ts:

home.html:

3 Answers 3

Update

10 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related