Not displaying object item which contains `.` in angularjs

Question

Following JSON item not displaying in angularjs.

error = {
    "name": [
        "The name field is required."
    ],
    "salary.salary_id": [
        "The salary.salary id field is required."
    ]
}

When I am trying to display error using angularjs,

{{error.name[0]}}

output will be The name field is required.

When I am trying to display second one,

{{error.salary.salary_id[0]}}

It display nothing, I hope the problem with . operator placed in key name.

How can I solve this?

Tushar · Accepted Answer · 2015-07-08T07:25:40.367

4

Use [] notation whenever your object key contain special characters.

{{error['salary.salary_id'][0]}}

When you use {{error.salary.salary_id[0]}} to get the value, it will search for the key of salary inside error and then try to find the salary_id inside the salary key, which is undefined.

edited Jul 08 '15 at 07:25

answered Jul 08 '15 at 07:16

Tushar

85,780
21
159
179

score 1 · Answer 2 · edited May 23 '17 at 12:14

1

Use bracket notation instead of dot notation:

{{error['salary.salary_id'][0]}}

Check: bracket vs dot notation

edited May 23 '17 at 12:14

Community

1
1

answered Jul 08 '15 at 07:17

Bhojendra Rauniyar

83,432
35
168
231

score 0 · Answer 3 · answered Jul 08 '15 at 07:19

0

It's a common problem of java developers to put dots in element's id properties in javascript / html. It causes a lot of conflicts and problems. You can read it like an array (error['salary.salary_id']) but you will get more problems in future (in CSS, dots are styling classes).

Please, note that my intention is that you can avoid dots in ids.

Good luck.

answered Jul 08 '15 at 07:19

Marcos Pérez Gude

21,869
4
38
69

but it will grouping all kind of items together as `json`. – gsk Jul 08 '15 at 07:24
It's not a reason. All of us can group all kind of elements in a json and it's not necessary to put dots in ids. This is not a correct id: `
` . You can give it a lot of wheels, but is a cruft, a crap, a bad practice, an incorrect method of identify in html. Web is not java.
– Marcos Pérez Gude Jul 08 '15 at 07:28
Thank you for reply,meanwhile I am using angularjs,then it will be a problem? – gsk Jul 08 '15 at 07:39
No, angularjs is not the problem. Take it easy, I don't want to cause you a problem, not at all, but I need to advice because I see a lot of issues and errors that I might to solve, because java developers have this behaviour, inserting dots in ids. If you try to avoid this practice, you can develop web with less errors – Marcos Pérez Gude Jul 08 '15 at 07:44

Not displaying object item which contains `.` in angularjs

3 Answers3