Attempting to overcome these challenges, I have delved into the world of Angular, but the syntax remains elusive and the methods seem to perform complex operations behind the scenes. As a newcomer to web development embarking on my first project involving an API with AngularJS, I am just scratching the surface of JavaScript. My current progress includes retrieving JSON data from a BitBucket API using AngularJS and manipulating arrays of data in JavaScript.
Below are snippets of controller.js and index.html:
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>
The presence of three empty rows caused by the ng-repeat
functionality is puzzling. Seeking guidance on identifying the source of this issue and resolving it would be highly appreciated. Thank you.
What is causing the three blank rows?
Referencing the image displaying the empty rows and the data from {{commit[0]}}
: https://i.sstatic.net/G69xt.png
Upon addressing the aforementioned problem, the next task involves iterating through the commit array using
from i=0 while i <= commit.length
, whereby the length of the commit array seems unreachable at present.
How can I efficiently loop through the commit[i]
array to populate the table based on the identified JSON array information?
An initial solution suggests creating a JS loop to convert all table HTML content into a string and inject it back into the HTML with an id tag.
While confident in utilizing AngularJS' ng-repeat
feature, uncertainty persists regarding its correct implementation for seamless data display. Assistance or insights are welcomed as I navigate these complexities. Appreciate your help in advance.