Reading and iterating though a JSON object angular

Question

I am writing an angular website and I am new to the platform. I am trying to get data from a web service in JSON format then just output it. I have seen many examples where the data is first piped into an array of a class/model. But I would like to know if there is an easier way where I do not have to do this extra data structure. (This is a really simple application)

In my typescript class:

export class TestimonialsComponent implements OnInit {

  public testimonials: Observable<any[]>;
  baseUrl = 'http://127.0.0.1:80/';

  constructor(private httpClient: HttpClient){}

  ngOnInit() {
  }

  get_testimonials(){
      this.httpClient.get(this.baseUrl).subscribe((res : any[])=>{
      console.log(res);
      this.testimonials = res;
      });
  }

And in the HTML file

<button (click)="get_testimonials()">GET /products</button>



<li *ngFor='let testimonial of testimonials | async'>
  {{ testimonial.Name }}
</li>

The console successfully sees my object but I get this error message when I try to do the iteration:

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Ajit Nikam · Accepted Answer · 2019-08-19 12:47:57Z

1

The Error you are getting because of Async pipe

To know more about Async Pipe visit below link https://angular.io/api/common/AsyncPipe

Make Below changes in your code:

In typescript file:

 public testimonials: any[];

In Html file:

<li *ngFor='let testimonial of testimonials'>
    {{ testimonial.Name}}
</li>

answered Aug 19, 2019 at 12:47

Ajit Nikam

1011 silver badge2 bronze badges

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

Comments

Jens Alenius · Accepted Answer · 2019-08-19 11:59:25Z

0

Or you could use your code without the async pipe.

<li *ngFor='let testimonial of testimonials'>
  {{ testimonial.Name }}
</li>

There are benefits and drawback in both approaches. I found that without sync I have more control on error handling and loading indicators. But I suspect it can be solved with async to. Tip: get_testimonials should be written getTestimonials

answered Aug 19, 2019 at 11:59

Jens Alenius

1,9412 gold badges17 silver badges20 bronze badges

6 Comments

Ian Over a year ago

I get exactly the same error if I try this approach

Jens Alenius Over a year ago

NgFor only supports binding to Iterables such as Arrays. Check the data you get from the observable. console.log(res); Is it an array? Is it not set? You can also what data is transfered in f12 console. Is the array located in a property?

Jens Alenius Over a year ago

public testimonials: Observable<any[]>; should be public testimonials: any[]; as Ajit Nikam wrote

Jens Alenius Over a year ago

I think the array is located in the property data. try: testimonials.data

Jens Alenius Over a year ago

or better change this.testimonials = res.data (and then keep: let testimonial of testimonials)

|

iams0nus · Accepted Answer · 2019-08-19 11:42:58Z

0

enclose the testimonials | async into a parentheses which is much cleaner code

let testimonial of (testimonials | async)

and in the service do not subscribe to the http observable. the testimonials property should be an Observable.

get_testimonials(){this.testimonials = this.httpClient.get(this.baseUrl)};

the async will automatically subscribe and get the testimonials.

answered Aug 19, 2019 at 11:42

iams0nus

4923 silver badges8 bronze badges

1 Comment

Ian Over a year ago

If I try this I now get this error: ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Collectives™ on Stack Overflow

Reading and iterating though a JSON object angular

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related