jglom jglom - 1 month ago 9
AngularJS Question

AngularJS - Nested ng-repeat from firebase object

I am dealing with some firebase tree structure, and I am kinda stuck on the following issue.

I want to ng-repeat through the matches (in the firebase tree structure) and display them.
But how do I ng-repeat through a tree structered firebase database?

The first thing a want to accomplish is that I want to get the team name (ex. "a") to ng-repeat it.
Thank you for your help.

This is my firebase database structure:

-matches
- match1
-team1: "a"
-team2: "b"
- match2
-team3: "c"
-team4: "d"


And this the result of the ng-repeat in the view I want to achieve:

team1 (a) vs team2 (b) || team3 (c) vs team4 (d)

This is my controller:

app.controller('gametableController', ['currentAuth', '$scope', '$location', '$firebaseObject', '$firebaseArray', '$http', function (currentAuth, $scope, $location, $firebaseObject, $firebaseArray, $http) {
$scope.versus = 'VS';

// GET MATCHES FROM DB!!
var ref = firebase.database().ref("matches");
var matchList = $firebaseObject(ref);

matchList.$loaded().then(function () {
$scope.matchList = [];

angular.forEach(matchList, function (key, obj) {
$scope.matchList.push({
// ??
});
});

console.log(matchList)
});

}]);


I get this in the console -> console.log(matchList):

- match1
-team1: "a"
-team2: "b"
- match2
-team3: "c"
-team4: "d"


And this is my view.

<div class="container">
<div class="row" ng-repeat="matches in matchList">
<div class="col-md-12 mrgn">

<div class="match">

<div class="col-md-1 result-input-wrp card-plan-result">1</div>

<div class="col-md-3 card-plan card-wrp">

<div class="col-md-3 player-team-logo"><img ng-src="https://upload.wikimedia.org/wikipedia/commons/6/6d/FC_Schalke_04_Logo.svg" width="60" height="60" class="table-team-logo"></div>

<div class="col-md-9">
<div class="col-md-12 player-team-info info-team"><b>FC Schalke 04</b></div>
<div class="col-md-12 player-team-info info-user">Your Name</div>
<div class="col-md-12 player-team-info info-user">Wins: 1</div>
</div>
</div>


<div class="col-md-4">
<div class="versus-text"><b>{{ versus }}</b></div>
</div>


<div class="col-md-3 card-plan card-wrp">

<div class="col-md-3 player-team-logo"><img ng-src="https://upload.wikimedia.org/wikipedia/commons/6/6d/FC_Schalke_04_Logo.svg" width="60" height="60" class="table-team-logo"></div>

<div class="col-md-9 ">
<div class="col-md-12 player-team-info info-team"><b>FC Schalke 04</b></div>
<div class="col-md-12 player-team-info info-user">Your Name</div>
<div class="col-md-12 player-team-info info-user">Wins: 1</div>
</div>
</div>

<div class="col-md-1 result-input-wrp card-plan-result">2</div>

</div>


</div>
</div>
</div>

Answer Source

Try this:

angular.forEach(matchList, function(match) {
  var matchTeams = [];

  angular.forEach(match, function(team) {
    matchTeams.push(team)
  });

  $scope.matchList.push(matchTeams);
});

And to achieve this inside the view:

<div class="row" ng-repeat="match in matchList">
    {{match[0]}} vs {{match[1]}}
</div>