AngularJS ng-repeat creating three empty rows whien populating table & ng-repeat not repeating

Question

I've looked for solutions to these problems, but Angular is very foreign syntax for me, and every method seems to do a lot behind the scenes. I'm a newb to web development and this is my first project consuming an API, using AngularJS, and I just started to explore JavaScript. From my understanding, this is what I have accomplished so far. AngularJS gets the JSON data from a BitBucket API, Angular then creates a JavaScript object to access arrays of data.

Here's the controller.js and index.html snippets respectively:

var ngApp = angular.module('ng-app', []);
ngApp.controller('repoCntrl', function($scope, $http) {
  $scope.commitsData = function() {
    $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits')
      .success(function(data) {
        $scope.commitsArray = data;
      });
  }
  $scope.commitsData();
});

<!doctype html>
<html lang="en" ng-app="ng-app">

<head>
  <title>Page Title</title>
  <script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js></script>
  <script src="controllers.js"></script>

</head>

<body ng-controller="repoCntrl">
  <h3>Public activity in battlemidget's python-salesforce repository</h3>
  <table border="1" class="table table-striped">
    <tr>
      <th>Commits</th>
      <th>Comments</th>
      <th>Parent
        <br>Branch(es)</th>
      <th>Date</th>
      <th>Username</th>
    </tr>
    <tr ng-repeat="commit in commitsArray">

      <td>{{commit[0].hash.substr(0,6)}}</td>
      <td>{{commit[0].message}}</td>
      <td>
        <p>{{commit[0].parents[0].hash.substr(0,6)}}
          <br>{{commit[0].parents[1].hash.substr(0,6)}}
        </p>
      </td>
      <td>{{commit[0].date}}</td>
      <td>{{commit[0].author.raw}}</td>

    </tr>
  </table>
</body>

</html>

I believe ng-repeat is inserting three blank rows into my table when attempting to populate the table. I would like to know what is causing this and how I can fix it. Thanks.

What is causing the three blank rows? Here's an image displaying the empty rows and the data from {{commit[0]}}: https://i.sstatic.net/G69xt.png

Once I solve that issue I need to loop through the commit array from i=0 while i <= commit.length (in this case page one of the api is 30 commits long, but calling commit.length is not returning anything.

Now that I have identified where all the required information in the JSON arrays is, how can I loop through the commit[i] array to populate the table? The only solution I've found here is to write a JS loop that parses all the table html to a string and insert it with an id tag in the html.

I'm fairly confident I'm just not using the AngularJS ng-repeat correctly and it should handle this all for me, but the documentation doesn't seem to be helping me much. Any insight would be appreciated. Thanks in advance.

it's a bit hard to understand what you are trying to do here based on this code. Are you receiving an array full of arrays from your API? you are using a repeater to repeat through commitsArray, and for each iteration, you are trying to get the first element as if each iteration is in itself an array. can you post a sample of what commitsArray actually contains on the server? very rarely is it ever necessary to use bracket syntax inside an ng-repeat like this.... — Claies
– Claies, Commented May 23, 2015 at 18:44
Yes, the bracket syntax was completely unnecessary. Thanks again for all your help! — taky2
– taky2, Commented May 24, 2015 at 1:17

Claies · Accepted Answer · 2015-05-23 19:00:28Z

1

Looking at the data you have coming out of the API, commitsArray should be an object with 4 properties, pagelen, page, next, and values. commitsArray.values is an array of commits. So it appears, what you are doing is iterating over the 4 properties of commitsArray, and trying to treat each of the 4 properties as an array, grabbing the first element. The first 3 print blank, because they are not an array. The 4th prints just the first row.

You don't actually need to refer to your objects in that manner. The iterator ng-repeat is smart enough to handle arrays without you needing to refer to them by element position. Try this instead:

<table border="1" class="table table-striped">
    <tr>
      <th>Commits</th>
      <th>Comments</th>
      <th>Parent
        <br>Branch(es)</th>
      <th>Date</th>
      <th>Username</th>
    </tr>
    <tr ng-repeat="commit in commitsArray.values">

      <td>{{commit.hash.substr(0,6)}}</td>
      <td>{{commit.message}}</td>
      <td>
        <p ng-repeat="parent in commit.parents">
          {{parent.hash.substr(0,6)}}
        </p>
      </td>
      <td>{{commit.date}}</td>
      <td>{{commit.author.raw}}</td>

    </tr>
</table>
Page {{commitsArray.page}}, {{commitsArray.pagelen}} commits.
<a ng-src="{{commitsArray.next}}">Next Page</a>

answered May 23, 2015 at 19:00

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Claies Over a year ago

note I added the last bit to show how to utilize the other elements coming from the API; in particular, that <a> tag is just to show that the data is being parsed properly. You'll want to incorporate that variable into your calling service to do actual pagination.

taky2 Over a year ago

Wow, I can't believe I didn't try that ! Thanks @Claies ! Love the last bit.

Claies Over a year ago

angular can be actually more straightforward than it seems at first glance. sometimes the simplest of ideas work the best, but it takes a bit to realize that you have so much power. :)

omikes · Accepted Answer · 2015-05-23 18:29:35Z

Filter out the bad data with ng-if="commit[0].message != null"

var ngApp = angular.module('ng-app', []);
ngApp.controller('repoCntrl', function($scope, $http) {
  $scope.commitsData = function() {
    $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits')
      .success(function(data) {
        $scope.commitsArray = data;
      });
  }
  $scope.commitsData();
});

<!doctype html>
<html lang="en" ng-app="ng-app">

<head>
  <title>Page Title</title>
  <script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js></script>
  <script src="controllers.js"></script>

</head>

<body ng-controller="repoCntrl">
  <h3>Public activity in battlemidget's python-salesforce repository</h3>
  <table border="1" class="table table-striped">
    <tr>
      <th>Commits</th>
      <th>Comments</th>
      <th>Parent
        <br>Branch(es)</th>
      <th>Date</th>
      <th>Username</th>
    </tr>
    <tr ng-repeat="commit in commitsArray" ng-if="commit[0].message != null">

      <td>{{commit[0].hash.substr(0,6)}}</td>
      <td>{{commit[0].message}}</td>
      <td>
        <p>{{commit[0].parents[0].hash.substr(0,6)}}
          <br>{{commit[0].parents[1].hash.substr(0,6)}}
        </p>
      </td>
      <td>{{commit[0].date}}</td>
      <td>{{commit[0].author.raw}}</td>

    </tr>
  </table>
</body>

</html>

Collectives™ on Stack Overflow

AngularJS ng-repeat creating three empty rows whien populating table & ng-repeat not repeating

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related