Arjun Ajith Arjun Ajith - 1 month ago 13
Javascript Question

How to do ng-repeat on $firebaseArray output with multiple levels?

I am using $firebaseArray for collecting the data from firebase. Output is as follows:

[
{
"BankAccount": {
"AccountHolder": "Tom Antony",
"AccountNumber": "56767887"
},
"Info": {
"BillingAddress": {
"City": "XYZ",
"State": "ABC"
},
"FullName": "Tom Antony",
"PhoneNumber": "634762347"
},
"$id": "dGUZX5SWi7aP0SNYLYqEiMdCYAS2",
"$priority": null
},

{
"Campaigns": {
"Settings": {
"Active": true
}
}
},
"Info": {
"BillingAddress": {
"City": "ABC",
"State": "DFG"
},
"FullName": "Mario",
"PhoneNumber": "634762347"
},
"$id": "tBqGZ7g6VwNYOWoVy7C1FHKZKFS2",
"$priority": null
}
]


My js is as follows:

const rootRef = firebase.database().ref().child('Users');
$scope.users = $firebaseArray(rootRef);


Each Array element will have different type of objects, but each will have a similar object called Info, which contains a field for FullName I need to apply ng-repeat on this FullName. My implementation is as shown below:

<div ng-repeat="user in users.Info">
<p ng-bind="user.FullName"></p>
</div>


But its not working. What are the mistakes I made here?

Answer

You are trying to iterate on the wrong property. You have two objects (user) which each have an Info property that you want the FullName from. You do not have two Info objects. Therefore, you should be iterating over the users, not iterating over users.Info.

Try this instead:

<div ng-repeat="user in users">
  <p ng-bind="user.Info.FullName"></p>
</div>

Also, your object you pasted here wasn't valid JSON, you had an extra }.

Full Working example: http://plnkr.co/edit/ryfjhO0c3egHfKnaL9SQ?p=preview