AngularJS ng-repeat creating three empty rows whie

2019-05-21 00:03发布

站内问答 / JavaScript
1748 2 5

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]}}: http://i.stack.imgur.com/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.

2条回答
我欲成王，谁敢阻挡
2楼-- · 2019-05-21 00:19

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>

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
3楼-- · 2019-05-21 00:23

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)