How can I display my object observable data

Question

I am passing an id through a url in my angularfire2 app and collecting it in the onInit method

  ngOnInit() {
    // subscribe to router event
    this.activatedRoute.params.subscribe((params: Params) => {
      this.groupId = params['groupId'];
      // grab specific group
      this.group = this.af.database.object('/groups/'+this.groupId);
      this.group.subscribe(console.log);
    });
  }

the console.log shows perfectly the object I want but I can't then display it the HTML with {{group.data}} instead I get the string [object Object].

I get the same result using a list observable too but in the console log I get a bunch of arrays of the data I want instead of 1 object so an object would be preferable if possible.

What do I have to do to be able to display the data?

Please post your model demonstrating the data. This issue can't be accurately diagnosed without knowing what that looks like. If data is a list-like object, for example, then the answer is different than if data is a simple key value pair. — J. Adam Connor
– J. Adam Connor, Commented Mar 4, 2017 at 19:11

HirenParekh · Accepted Answer · 2017-03-04 07:48:20Z

2

As per the code snippet you provide it look like group is Observable, so you can you async pipe in your template as follows,

<div>
   {{group | async}}
</div>

answered Mar 4, 2017 at 7:48

HirenParekh

3,7453 gold badges26 silver badges37 bronze badges

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

Comments

danday74 · Accepted Answer · 2017-03-04 02:51:21Z

1

console.log(JSON.stringify(yourObject));

or if you want to log what is being omitted down the RXJS stream ..

this.activatedRoute.params.do(x => console.log(x)).subscribe

if in your HTML you want to display an Object you want to use the JSON pipe ..

instead of ..

{{ yourObject }}

you want ..

{{ yourObject | json }}

If you want to output a list ..

<ul>
    <li *ngFor="let item in list">
        {{ item | json }}
    </li>
</ul>

edited Mar 4, 2017 at 2:51

answered Mar 4, 2017 at 2:46

danday74

58.1k56 gold badges273 silver badges337 bronze badges

5 Comments

Smiter Over a year ago

thanks for the advice but now i am getting: EXCEPTION: Uncaught (in promise): Error: Error in ./GroupsComponent class GroupsComponent - inline template:5:29 caused by: Converting circular structure to JSON when i add the json pipe

danday74 Over a year ago

the reason you are getting this is explained here .. stackoverflow.com/questions/32334580/… .. i will find a fix for you one sec

danday74 Over a year ago

the reason this happens is because the | json pipe is, under the hood, simply using JSON.stringify (which converts an object to a string so you can read it) .. if JSON.stringify is passed a JSON object with cyclic references (references that point back to itself) then this error occurs - still looking for a fix

danday74 Over a year ago

the best i can come up with is .. stackoverflow.com/questions/5410162/… .. which has various solutions - most of which involve using a library (like dojo) to overcome this problem

danday74 Over a year ago

you could just stringify the property you are interested in or you could just console.log each one and inspect the object in the browser console tab - all the best - if you dont know what properties are on the Object just use Object.keys(yourObject)

Collectives™ on Stack Overflow

How can I display my object observable data

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related