How to access json object value by key in View Angular 6

Question

I'm new to Angular 6. I'm not getting how to access Json object values in view using key.

I'm making http.get(url) in my service and I'm calling that method in my component

export class CustomersComponent implements OnInit {

constructor(private accounts: AccountService) { }
account: Object;

ngOnInit() {
  this.accounts.getAccountById(1).subscribe((data)=> {
  this.account = data ;
}
);}}

The returned data is a json object is like this

{
 "accountId": 1,
 "attributeCode": "2300000000",
 "attributeLabel": "Customer Status"
 }

How to access the values inside this json object in view?

I have tried using

{{account.accountId}}

getting error in console as accountId undefined

   {{account | json}}

This is working fine, it is printing everything but I would like to use the values inside this object at different places in my view.

Sajeetharan · Accepted Answer · 2018-12-01 13:18:20Z

1

Access using [key] as follows,

{{account['accountId']}}

edited Dec 1, 2018 at 13:18

answered Dec 1, 2018 at 12:34

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

konidelaprasad Over a year ago

Getting this error. TypeError: Cannot read property 'undefined' of undefined

Sajeetharan Over a year ago

you should enclose in quotes as its a string

ashish pal · Accepted Answer · 2018-12-01 13:17:02Z

0

To access values of correspondent key, do like this

{{account['accountId']}}

because accountId or key is string.

answered Dec 1, 2018 at 13:17

ashish pal

4774 silver badges10 bronze badges

Comments

Reza Torkaman Ahmadi · Accepted Answer · 2018-12-01 13:22:39Z

0

Maybe It's because your data is not loaded yet. I suggest put an div or ng-template before accessing it in template and if account is provided, then try to access it.like below:

<div *ngIf="account">
{{account['accountId']}}
</div>

or this:

{{account?.accountId}}

answered Dec 1, 2018 at 13:22

Reza Torkaman Ahmadi

3,0582 gold badges23 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to access json object value by key in View Angular 6

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related