1

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>
1

3 Answers 3

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.

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

10 Comments

this.countries = res.data && res.data.children; line giving error --> data does not exist in HttpResponse<object>
Try to console it before assigning to the variable
your seen my response in api Url?,i want to show title in list but your answer showing me errors
please try to elaborate your code because i am begginer
@AbhiRam Check my updated answer with working example
|
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);
});

3 Comments

That's a post request, the question asks for a get request
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); });
Module not found: Error: Can't resolve 'rxjs/add/operator/map'
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;
  });

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.