CODEWITHSUNDEEP
angularobservableangular7rxjs6
Presto
Presto

Reputation: 888

How to return object from Observable in Angular 7

I've got a application on Angular 7 and [email protected]. I'm trying to get value from my Observable object and I don't know why it doesn't return.

There is my example code: https://stackblitz.com/edit/angular-w9ftkw

On my example html file I've got:

<hello name="{{ result.property1 }} {{ result.property2 }} {{ result.property3 }} {{ resultIsUndefined }}"></hello>
<p>
  {{err}}
</p>

but the properties ({{ result.property1 }} {{ result.property2 }} {{ result.property3 }}) of my result are not displayed.

What is wrong with that?

The res object which I'm trying to return is still type of Observable. I was trying to cast it on MyResponseClasss but doesn't effect.

And this is my real problem. Why returned object is still type of Observable.

On this part of code:

if (result) {
  result.subscribe((result: MyResponseClass) => {
    this.resultIsUndefined = false;
    res = result;
    console.log(res);
  })
  return res;
}

I want have a res with data type of MyResponseClass.

Upvotes: 2

Views: 6822

Answers (5)

Farida Anjum
Farida Anjum

Reputation: 569

you are getting response from this calss. 

protected test(response: Response): Observable<MyResponseClass>{};

Here in this class you need to call http service call.

protected test(response: Response): Observable<MyResponseClass>{
this.http.get(url,options);
};

Then after you need to subscribe for the observer in your ts class.

export class AppComponent  {
err: string;
resultIsUndefined: boolean;
http: HttpClient;
result: MyResponseClass;
name: string;
constructor(@Inject(HttpClient) http: HttpClient) {
this.http = http;
this.result = this.get();
}
protected test(): Observable<MyResponseClass> { 
let result = new MyResponseClass();
result.property1 = "Mr";
result.property2 = "John";
result.property3 = "Kowalsky";
return of<MyResponseClass>(result); 
}
get(): MyResponseClass {
let res = new MyResponseClass();
let url_ = '';
let options_: any = {
method: "get",
headers: new Headers({
"Content-Type": "application/json",
"Accept": "application/json"
})
};
this.test().subscribe(res =>{
this.name = res.property1 + res.property2 + res.property3;
console.log(res, this.name);
},
error=>{
this.err = JSON.stringify(error);
console.log(error);
})
this.resultIsUndefined = true;
return <MyResponseClass>null;
}
}

In app.component.html it needs to be like this

<hello [name]="name"></hello>
<p>
{{err}}
</p>

Upvotes: 0

Presto
Presto

Reputation: 888

I solved my problem. Observable object can be created on both ways:

  • as async by using Observable<T>
  • as sync by using of<T>

My problem was that I created Observable objects as sync on async app. That's all.

Upvotes: 2

Talg123
Talg123

Reputation: 1506

All you have to do is to add the json pipe.

like this: 

{{ err | json}}

or if you know exactly what property inside the object you want use it example:

{{err.message}}

Upvotes: 1

Farida Anjum
Farida Anjum

Reputation: 569

you need to stringify the json object to show in html. like this

let result = this.http.request("get", url_, options_).pipe(
map((response_: any) => this.test(response_)),
catchError((err: any, caught: Observable<any>) => {
**this.err = JSON.stringify(err);**
if (caught instanceof Response) {
try {
   return this.test(caught);
} catch (e) {
return of<MyResponseClass | null>(<any>throwError(e));
}
} else
  return of<MyResponseClass | null>(<any>throwError(caught));
})
);

Upvotes: 0

Witold Kaczurba
Witold Kaczurba

Reputation: 10485

When your data comes from Observable you should consider using async pipe {{ whatever | async }}

More read:

Upvotes: 0

Related Questions