Angularjs - How to call an array inside JSON data to html

Question

I have a little problem.. I've got this JSON data:

[
{
    "students": {
        "student_id": "2",
        "student_school": "1",
        "student_name": "Charles"            
    },
    "parents": [
        {
            "parent_id": "2",
            "parent_school": "1",
            "parent_name": "Tim"
        }
    ]
},
{
    "students": {
        "student_id": "3",
        "student_school": "1",
        "student_name": "Johnny"
    },
    "parents": [
        {
            "parent_id": "3",
            "parent_school": "1",
            "parent_name": "Kate"
        }
    ]
}
]

The problem is that I try to call to my html page by angular:

{{student.student.student_name}}

Yeah it works but when I want to call the parents data it doesn´t...

{{student.parents.parent_name}}

add the code that doesn't work, your attempt to call the parents — J-Dizzle, Apr 21 '15 at 22:28

score 2 · Accepted Answer · answered Apr 21 '15 at 22:35

Simply:

<div ng-repeat="student in data">
    {{student.students.student_name}}
    {{student.parents[0].parent_name}}
</div>

Or define function in scope called for example getParentDescription and than

<div ng-repeat="student in data">
    {{student.students.student_name}}
    {{getParentDescription(student)}}
</div>

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

1

Because parents is an array. You must specify the index (0 in your case). See the response here : How to get value from a nested JSON array in AngularJS template?

edited May 23 '17 at 12:07

Community

1
1

answered Apr 21 '15 at 22:36

Spawnrider

1,727
1
19
32

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

You can't access child scopes directly from parents. See the comment by Vittorio suggesting<ng-repeat="child in parent.children"/> also Binding to Primitives

edited May 23 '17 at 11:52

Community

1
1

answered Apr 21 '15 at 22:35

Ben Petersen

471
4
15

Why do you think he has multiple scopes? But yeah, we can only guess without seeing any code. – Micha Schwab Apr 21 '15 at 22:40

score 0 · Answer 4 · answered Apr 21 '15 at 23:21

0

I'm guessing student is from an ng-repeat where you go through each object in the array.

Take a closer look at your JSON. While "students": {} points to an object, "parents": [] points to an array. Fix your JSON and it'll be fine

answered Apr 21 '15 at 23:21

ErikAGriffin

739
3
10
21

Angularjs - How to call an array inside JSON data to html

4 Answers4