AngularJS ng-repeat is creating three empty rows when filling table with JSON array

Question

I found two other issues posted here experiencing a similar problem, but I'm fairly certain that my problem is not related to tags and instead an issue with the ng-repeat function in Angular.

I am using a loop to create the HTML string which can be used to fill all the table data.

So far, It is working as expected except for one detail. Each time my loop iterates the ng-repeat creates 3 empty rows before displaying the actual data.

Here's the controller.js

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.commitArray = data;
     });
  }
  $scope.commitsData();
});

And here's my index.html

<h3>Public activity in battlemidget's python-salesforce repository</h3>

<table id="mytable" 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>
    <div id="tblContents"></div>                   
</table>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    var tbl=$("<table/>").attr("id","mytable");
    var tString = "";
    for (var i = 0; i <= 10; i++) {
        tString += "<tr ng-repeat=\"commit in commitArray\">";
        tString += "<td>{{commit["+i+"].hash.substr(0,6)}}</td>";
        tString += "<td>{{commit["+i+"].message}}</td>";
        tString += "<td>";
            tString += "<p> {{commit["+i+"].parents[0].hash.substr(0,6)}}<br>"
                         + "{{commit["+i+"].parents[1].hash.substr(0,6)}}</p>";
        tString += "</td>";
        tString += "<td>{{commit["+i+"].date.substr(0,10)}}</td>";
        tString += "<td>{{commit["+i+"].author.raw}}</td>";
        tString += "</tr>";
    }
    $("#mytable").append(tString);

</script>

I'm a newb to web development and this is my first serious project incorporating an API, using AngularJS, etc. Sorry I've I've done anything here that goes against standard conventions. Here's a picture showing the 3 empty rows that I believe ng-repeat is inserting. I would like to know what is causing this and how I can fix it. Thanks so much. (Hope this isn't too much code). Here's an image displaying the empty rows: https://i.sstatic.net/Atejf.png

Revised Question here: stackoverflow.com/questions/30416048/… — taky2
– taky2, Commented May 23, 2015 at 18:16

Patrick Motard · Accepted Answer · 2015-05-22 22:09:03Z

1

Either chose angular or jquery but not both. What you're trying to do in jquery can, and should be done the Angular way if you're in an angular project. I'm totally confused by your title because you say ng-repeat but you're not using an ng-repeat, you're using a forloop and some voodoo jquery magic.

Try something like this:

    var ngApp = angular.module('ng-app', []);
    ngApp.controller('repoCntrl', function($scope, $http) {
       $scope.commitArray = [];          
       $scope.commitsData = function(){
         //when you get the chance, move this get call to a factory or service
         $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits')
              .success(function(data){
                  $scope.commitArray = data;
           });
         }
         $scope.commitsData();

    });

Then in your view:

<tr ng-repeat="thing in commitArray">
   {{some property of thing, the ith element of commit array}}
</tr>

Point is, read up on ng-repeats. You can use them to loop through $scope objects. Hope this helps point you in the right direction.

answered May 22, 2015 at 22:09

Patrick Motard

2,6602 gold badges16 silver badges23 bronze badges

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

1 Comment

taky2 Over a year ago

That's why I initially started using angular. Never was able to get the ng-repeat to actually fill the table with all available data. Should've tackled this issue earlier.

taky2 · Accepted Answer · 2015-05-24 07:39:42Z

Pure AngularJS SOLUTION:

var ngApp = angular.module('ng-app', []);
ngApp.controller('repoCntrl', function($scope, $http) {

  $scope.searchFilter = null;
  $scope.commitsArray = [];

  $scope.searchFilter = function(commit) {
    var keyword = new RegExp($scope.commitFilter, 'i');
    return !$scope.commitFilter || keyword.test(commit.hash) || keyword.test(commit.date) || keyword.test(commit.author);
  };

  $scope.commitsData = function() {
    $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits')
      .success(function(data) {
        $scope.commitsArray = data;
      });
  }
  $scope.commitsData();

  $scope.commitsArray2 = [];
  $scope.commitsData2 = function() {
    $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits/?page=2')
      .success(function(data) {
        $scope.commitsArray2 = data;
      });
  }
  $scope.commitsData2();

  $scope.commitsArray3 = [];
  $scope.commitsData3 = function() {
    $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits/?page=3')
      .success(function(data) {
        $scope.commitsArray3 = data;
      });
  }
  $scope.commitsData3();
});

<!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>

  <label>Search:
    <input type="text" ng-model="commitFilter" placeholder="" />
  </label>
  <br>
  <br>
  <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 | filter: searchFilter">
      <td align="center">{{commit.hash.substr(0,6)}}</td>
      <td>{{commit.message}}</td>
      <td>
        <p align="center" ng-repeat="parent in commit.parents">
          {{parent.hash.substr(0,6)}}
        </p>
      </td>
      <td width="100" align="center">{{commit.date.substr(0,10)}}</td>
      <td>{{commit.author.raw}}</td>
    </tr>
    <tr ng-repeat="commit in commitsArray2.values | filter: searchFilter">
      <td align="center">{{commit.hash.substr(0,6)}}</td>
      <td>{{commit.message}}</td>
      <td>
        <p align="center" ng-repeat="parent in commit.parents">
          {{parent.hash.substr(0,6)}}
        </p>
      </td>
      <td width="100" align="center">{{commit.date.substr(0,10)}}</td>
      <td>{{commit.author.raw}}</td>
    </tr>
    <tr ng-repeat="commit in commitsArray3.values | filter: searchFilter">
      <td align="center">{{commit.hash.substr(0,6)}}</td>
      <td>{{commit.message}}</td>
      <td>
        <p align="center" ng-repeat="parent in commit.parents">
          {{parent.hash.substr(0,6)}}
        </p>
      </td>
      <td width="100" align="center">{{commit.date.substr(0,10)}}</td>
      <td>{{commit.author.raw}}</td>
    </tr>
  </table>
</body>

</html>

Ideally this should automatically check for additional pages of JSON data and load them without using hardcoded page references for the http.get

Collectives™ on Stack Overflow

AngularJS ng-repeat is creating three empty rows when filling table with JSON array

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related