Angular, async call with an object?

Question

Most of the examples I found online shows how to use the async pipe with either an array or an array of objects as a response from a URL API call.

The situation is that sometimes you are not gonna get an array objects but you'll get an object that contains a mix of objects and arrays inside. and you will still want to use | async inside your html. like this one

In the following Stackblitz , I added [data]="remoteData | async", and my table wont show any data. getting the following error message:

Error: InvalidPipeArgument: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Needless to say, if I take it off the data will show.

Obviously, I know my method works for an array as a response, in this case the response is an object. I know you are suppose to use Observables (behaviorSubject) to make this work, but having a hard time trying to get it right.

So, can I keep the async pipe? even tough the response is an object or do it need to subscribe and unsubscribe manually?

What I've tried so far: line 18 inside my service

this.listSource = apiCall;
    return this.listSource;

but I get a linting error saying:

'Observable' is missing the following properties from type 'BehaviorSubject': _value, value, getValue, next, and 9 more.

actually I'm not. but still doesnt work If I change it to any — brohymn
– brohymn, Commented Feb 10, 2019 at 23:48
You should read the docs on the async pipe: angular.io/guide/pipes#the-impure-asyncpipe. It is meant to be used with a Promise or Observable. — R. Richards
– R. Richards, Commented Feb 10, 2019 at 23:57

Vladimir Prudnikov · Accepted Answer · 2019-02-11 00:04:21Z

1

In your controller remoteData is not Observable, but actual value.

ngOnInit() {
  this.remoteData = this.remoteService.getData();
}

Now it is Observable and async pipe will work.

answered Feb 11, 2019 at 0:04

Vladimir Prudnikov

7,3124 gold badges53 silver badges64 bronze badges

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

1 Comment

brohymn Over a year ago

nevermind, added data]="(remoteData | async)?.value" on html and that works

Thriller · Accepted Answer · 2019-02-10 23:44:58Z

0

You don't need to use async pipe in your case, just checked your code, remove your async pipe and things are good. you can read more about how to use async pipe and why you need to in this tutorial https://angular.io/tutorial/toh-pt6#asyncpipe

answered Feb 10, 2019 at 23:44

Thriller

5054 silver badges11 bronze badges

1 Comment

brohymn Over a year ago

so you're saying async pipe is only for arrays ?, so if you have an object then you just cant use it and you must unsubscribe manually to avoid a memory leak...care to explain ?

Collectives™ on Stack Overflow

Angular, async call with an object?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related