There is a json data and how to bind json field using dot path in angular 12 html?

Question

Example:

//Angular
data: any = { name: 'x1', address: { city: 'xyz' } };
field: any = 'address.city';

//Html
<input [(ngModel)]="data[field]"/> //output: undefined

How to bind and display city using json dot path?

I don't want as

<input [(ngModel)]="data.address.city"/>
<input [(ngModel)]="data['address']['city']"/>

Does this answer your question? [Safe navigation operator (?.) or (!.) and null property paths](https://stackoverflow.com/questions/40238144/safe-navigation-operator-or-and-null-property-paths) — msanford, Nov 14 '21 at 04:36

score 1 · Answer 1 · answered Nov 14 '21 at 04:33

1

You can use safe navigation operator (?) to display the value of city in html.

Such as:

answered Nov 14 '21 at 04:33

Zoha Irshad

427
5
5

no, object is not static one. In my case, object & field will be dynamic one. Example: other one. data: any = { name: 'x1', area: { town: 'abc' } }; field: any = 'area.town'; – Settu Nov 14 '21 at 04:39
You can go through this article. https://dev.to/rramname/read-properties-of-json-object-and-its-values-dynamically-in-angular-javascript-3db2 – Zoha Irshad Nov 14 '21 at 04:44
no, it is an article for simple object example like { "name": "x1", "mobile": "1234"}. My case is different – Settu Nov 14 '21 at 04:50

There is a json data and how to bind json field using dot path in angular 12 html?

1 Answers1