Making HTTP requests in Angular 8

Question

I'm making http request in angular. but values wont display in web page and also i'm using sample free api - https://reqres.in/api but this wont display any values.

here is my component.ts

 @Component({
      selector: 'app-value',
      templateUrl: './value.component.html',
      styleUrls: ['./value.component.css']
    })
    export class ValueComponent implements OnInit {

      values: any;
      constructor(private http: HttpClient) { }

      ngOnInit() {
        this.getValues();
      }

      getValues() {
      return this.http.get<any>('https://reqres.in/api/users/2').subscribe(response => {this.values = response.any; });

      }

    }

and here is component.html

 <ul>
    <li *ngFor="let value of values">
      {{ value.text }}
    </li>
  </ul>

Why do you use 'response.any'? Response is a JSON object with a key of 'data'. — zhulien
– zhulien, Commented Jun 6, 2019 at 8:36

PawelC · Accepted Answer · 2019-06-06 08:46:54Z

1

If you get single record, do not user ngFor.

Change response.any to response.data beacuse api returns in JSON 'data' as key not 'any' then in template add for example:

<ul>
    <li>
      {{ values.email}}
    </li>
  </ul>

ngFor you can use, when api return data as object array. Very good solution is using Postman, to check what data API returns, to know what the JSON structure looks like.

edited Jun 6, 2019 at 8:46

answered Jun 6, 2019 at 8:33

PawelC

1,2184 gold badges27 silver badges51 bronze badges

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

4 Comments

Didu Over a year ago

thanks. it worked. i'm a beginner for this and really appreciated for the help :)

PawelC Over a year ago

No problem :) Good luck with angular.

Didu Over a year ago

how do i change this if i need to bring list? should i move to ngFor? is there any change need to be done in component.ts?

PawelC Over a year ago

Yes, then you must user ngFor. In component you do not have to change anything.

Dusan Radovanovic · Accepted Answer · 2019-06-06 08:53:06Z

1

this.values = response.any is wrong because your response is an object which has property data not any.

Also at this endpoint, you are getting a single user, not a collection of users, so you should rename your variable to value not values.

 @Component({
      selector: 'app-value',
      templateUrl: './value.component.html',
      styleUrls: ['./value.component.css']
    })
    export class ValueComponent implements OnInit {

      value: any;
      constructor(private http: HttpClient) { }

      ngOnInit() {
        this.getValue();
      }

      getValue() {
      return this.http.get<any>('https://reqres.in/api/users/2').subscribe(response => {this.value = response.data; });

      }

    }

In HTML you can use the json async pipe to present your data as json

<div> {{ value | json}} </div>

answered Jun 6, 2019 at 8:53

Dusan Radovanovic

1,67915 silver badges24 bronze badges

2 Comments

Didu Over a year ago

thanks for the help. changed response.any to response.data and removed ngFor. now it works fine.thanks :)

Didu Over a year ago

how do i change this if i need to bring list? should i move to ngFor? is there any change need to be done in component.ts?

Collectives™ on Stack Overflow

Making HTTP requests in Angular 8

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related