Getting [Object Object] in Template with *ngFor Angular

Question

My data keeps appearing as [Object Object] in my HTML template when I do my *ngFor loop.

Here is my view with the data enumerated in the developer console:

Here is my HTML code:

Lastly, my TS code:

Also, when I iterate through "company.name" as such:

I get:

I'm storing the response from the server in the "companyResults" variable that I get when my "getCompany()" function is ran.

How do I get my data in string format?

Edit:

After looping through the keys, this is what they were:

I have updated my answer to use Observable try it out and let me know if it works. — Kamran Khatti
– Kamran Khatti, Commented Aug 3, 2021 at 8:15

eko · Accepted Answer · 2021-08-03 08:49:47Z

3

I think what you want to do is something like:

<mat-option..
  {{company.name}}
</mat-option>

You need to select a field in that object.

Update:

nameField = "2. name";

//constructor(...){}...

<mat-option..
  {{company[nameField]}}
</mat-option>

edited Aug 3, 2021 at 8:49

answered Aug 3, 2021 at 7:59

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

7 Comments

Dave Guerrero Over a year ago

I did do that initially, and it's my mistake for not posting the photo of me doing that first. However, when I choose the company name property, I get nothing. I get "undefined".

eko Over a year ago

ok I'm suspicious that the actual key is 5. name could you console.log the Object.keys of this.companyResults? As in loop the companyResults in a for loop and log the keys

Dave Guerrero Over a year ago

I updated the question. I believe you were right.

eko Over a year ago

I think you printed the Object.keys of this.companyResults but I actually meant the elements of this.companyResults; as in loop over this.companyResults and print Object.keys of each element inside this.companyResults

eko Over a year ago

yes! :-) so I was right; the key names are a little different. It is "2. name"

|

Kamran Khatti · Accepted Answer · 2021-08-03 09:57:34Z

2

In your HTML you are printing the whole company object instead of only company name.

Replace this

{{ company }}

with this

{{ company?.name }}

EDIT: As I read one of your comment that you tried above solution already then here is the updated answer.

P.S: The issue was a wrong company name i.e 2. name instead of just name, however rather than going with those weird names I would parse and create a new array of object with more readable field names.

// Declare companies variable as Observable
searchedCompanies$: Observable<any>;

getCompany(value: any) {
 // Do not subscribe here but return the Observable response
 this.searchedCompanies$ = this.searchCompanyService.searchCompanies(value)
 .pipe(map((result) => result.bestMatches.map(company => ({
    symble: company['2. symble'],
    name: company['2. name'],
    type: company['3. type'],
    region: company['4. region']
   ...
 })
)))

and in template subscribe the Observable by async pipe

Use async pipe to subscribe and read the data 
<mat-option *ngFor="let company of searchedCompanies$ | async"
  {{company?.name}}
</mat-option>

edited Aug 3, 2021 at 9:57

answered Aug 3, 2021 at 8:00

Kamran Khatti

4,2071 gold badge23 silver badges33 bronze badges

2 Comments

Dave Guerrero Over a year ago

Unfortunately, I get the same result as before with the data appearing as "undefined".

Kamran Khatti Over a year ago

@DaveGuerrero I would parse the result and create a new array with more readable field names check the answer, also I would strongly recommend you to not subscribe Observable in component but use async pipe like above example, this will unsubscribe automatically and prevent memory leak.

Collectives™ on Stack Overflow

Getting [Object Object] in Template with *ngFor Angular

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related