I have encountered a roadblock in my Angular project. I am populating a table with run data retrieved from a REST call using ng-repeat. Each run includes GPS coordinates, and I have a function that converts these coordinates into the corresponding city name. Instead of displaying the coordinates, I want the table to show the city name for each run. Currently, I have a button that triggers the function to display the city, but I want this result to be automatically shown upon loading. Can anyone offer assistance?
Below is my current code snippet:
$http.get('/fastrada/getRun.do').success(function (data) {
$scope.runs = data;
angular.forEach($scope.runs, function (run){
/*run.city =*/ $scope.getInfo(run);
});
$scope.loading=true;
});
$scope.getInfo = function(run)
{
var latlng = run.latitude+","+run.longitude;
var request = new XMLHttpRequest();
if(run.latitude != 0 && run.longitude != 0) {
request.open('GET', 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' + latlng, true);
request.onload = function () {
if (request.status == 200 || request.status == 0) {
// Success!
var data = JSON.parse(request.responseText);
if(data !== undefined && data.results[0] !== undefined){
run.city = data.results[0].address_components[2].long_name;
}else {
run.city = "undefined";
}
}
else {
// Error handling
}
};
request.onerror = function () {
// Connection error handling
};
request.send();
}else{
run.city = "undefined";
}
}
And the HTML:
<tr ng-repeat="run in runs track by $index">
<td>{{run.city}}</a></td>
<td>{{run.getTime}}</td>
<td><button ng-click="getInfo(run)">Get City</button></td>
</tr>
Here is a Plunk that illustrates my issue. Thank you!