CODEWITHSUNDEEP
javascriptjsonhtmlangularjs
José Pablo Madrigal Rodríguez
José Pablo Madrigal Rodríguez

Reputation: 51

Angularjs multiple arrays with json

Well today i have a new problem. I'm trying to take multiple arrays of this json.

[ { "_id" : "541200a79fb6706de9164063" , "index" : 0 , "guid" : "403d5692-0f07-40e6-84f5-32cdee137127" , "isActive" : true , "school" : "BOILICON" , "address" : "532 Everit Street, Williamson, Kentucky, 197" , "registered" : "Monday, March 24, 2014 4:46 AM" , "professor" : [ { "id" : 0 , "name" : { "first" : "Mclean" , "last" : "Robertson"} , "email" : "[email protected]" , "age" : 36 , "phone" : "+1 (946) 436-2567" , "coursePrice" : "$4,882.28" , "favoriteParadigm" : "funcional"} ]}

Well i tried to do it like this on the html code:

$<div ng-controller="studentsController">
    <table>    
        <tr ng-repeat= "student in data.students">
            <td>{{student.index}}</td>
            <td>{{student.guid}}</td>
            <td>{{student.isActive}}</td>
            <td>{{student.school}}</td>
            <td>{{student.address}}</td>
            <td ng-repeat="prof in data.students.professor"> 
                email: {{prof.email}}
            </td>
        </tr>
    </table>
</div>$

But it doesn't work for me. Can anyone help me please?

Upvotes: 0

Views: 1158

Answers (3)

V31
V31

Reputation: 7666

Couple of things in the problem statement,

  1. First of all you need to avoid duplicates so have a track by expression in your ng-repeat.
  2. Since you are storing the json in a string you need to parse it to JSON using JSON.parse.
  3. Just like what @Zaheer mentioned since you need to refer to the outside ng-repeat you need to refer to the student instead of prof in data.students.professor

So your code will look like:

HTML:

<div ng-app>
    <table ng-controller="test">
        <tr ng-repeat="student in data.students track by $index">
            <td>{{student.index}}</td>
            <td>{{student.guid}}</td>
            <td>{{student.isActive}}</td>
            <td>{{student.school}}</td>
            <td>{{student.address}}</td>
            <td ng-repeat="prof in student.professor track by $index">email: {{prof.email}}</td>
        </tr>
    </table>
</div>

JS:

function test($scope) {
    $scope.data = {};
    var students = '[ { "_id" : "541200a79fb6706de9164063" , "index" : 0 , "guid" : "403d5692-0f07-40e6-84f5-32cdee137127" , "isActive" : true , "school" : "BOILICON" , "address" : "532 Everit Street, Williamson, Kentucky, 197" , "registered" : "Monday, March 24, 2014 4:46 AM" , "professor" : [ { "id" : 0 , "name" : { "first" : "Mclean" , "last" : "Robertson"} , "email" : "[email protected]" , "age" : 36 , "phone" : "+1 (946) 436-2567" , "coursePrice" : "$4,882.28" , "favoriteParadigm" : "funcional"} ]}]';
    $scope.data.students = JSON.parse(students);
}

Working Fiddle

Upvotes: 0

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20741

Change prof in data.students.professor to prof in students.professor since previously you have defined student in data.students so that student will contains professor details internally

Try this out

Working Demo

<div ng-app='myApp' ng-controller="studentsController">
    <table border="1">
        <tr ng-repeat="student in students">
            <td>{{student.index}}</td>
            <td>{{student.guid}}</td>
            <td>{{student.isActive}}</td>
            <td>{{student.school}}</td>
            <td>{{student.address}}</td>
            <td ng-repeat="prof in student.professor">email: {{prof.email}}</td>
        </tr>
    </table>
</div>

Upvotes: 1

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28548

within ng-repeat you have different scope and current item is directly accessible. So change

<td ng-repeat="prof in data.students.professor">

to this:

<td ng-repeat="prof in student.professor"> 
    email: {{prof.email}}
</td>

Upvotes: 1

Related Questions