CODEWITHSUNDEEP
javascriptangularjs
David Nugent
David Nugent

Reputation: 181

ng-repeat data binding in Angular not working. Where am I going wrong?

I'm trying to make a simple Premier League table using a free football data api. When I console log vm.table, I get all the data I should have for the table to work. Does that mean there is a fault in the html file? I'm a total novice with angular and I'm trying to learn it by making this little app. Can someone point me to where my problem is? The console shows no errors or anything, but it simply doesn't print the data into the table as expected.

this is the html file:

<html ng-app="eplApp" lang="en">
<head>

<meta charset="UTF-8">
<title>EPL Feeder</title>
<!-- styles -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="style.css">

<!-- scripts -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="script.js"></script>

</head>
<!-- define angular controller -->
<body ng-controller='tableCtrl as table'>
  <table>
    <thead>
      <tr><th colspan="4">English Premier League Table</th></tr>
  <tr>
        <td>Pos</td>
        <td>Team</td>
        <td>Played</td>
        <td>Win</td>
        <td>Draw</td>
        <td>Loss</td>
        <td>GF</td>
        <td>GA</td>
        <td>GD</td>
        <td>Points</td>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='team in vm.table' ng-class="{top:team.position === 1, cl: (team.position > 1) && (team.position < 5), el:team.position === 5, rel: (team.position > 17)}">
        <td>{{team.position}}</td>
        <td class="flexbox" ng-click="teamView()">
        <img ng-src="{{team.crestURI}}" alt="{{team.teamName}} crest" />
        <p class="teamName">{{team.teamName}}</p>
        </td>
        <td><p>{{team.playedGames}}</p></td>
        <td>{{team.wins}}</td>
        <td>{{team.draws}}</td>
        <td>{{team.losses}}</td>
        <td>{{team.goals}}</td>
        <td>{{team.goalsAgainst}}</td>
        <td>{{team.goalDifference}}</td>
        <td>{{team.points}}</td>
      </tr>
    </tbody>
  </table>

This is the script file:

var app = angular.module('eplApp', []);

app.controller('tableCtrl', function($http) {
  var vm = this;
  vm.table = [];
    $http({
      headers: { 'X-Auth-Token': '971acba677654cdb919a7ccebd5621e2' },
      method: "GET",
      url: "http://api.football-data.org/v1/soccerseasons/426/leagueTable"
}).then(function(response) {
  vm.table = response.data.standing;
  console.log(vm.table);
});
});

Upvotes: 2

Views: 229

Answers (2)

Hadi
Hadi

Reputation: 17299

it should be similar to this because you use controllerAs syntax in your app.

 <tr ng-repeat='team in table.standing' ...

Edit

after editing your question you should use @Sajeetharan answer.

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222592

You should change,

From

<body ng-controller='tableCtrl as table'>

To

<body ng-controller='tableCtrl as vm'>

Upvotes: 4

Related Questions