Greetings! Check out my code below for displaying XML data in an HTML table using AngularJS. Each record includes a "Delete Request" button.
Here is the HTML code:
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1" width="100%">
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Email ID</th>
<th>Device Status</th>
</tr>
<tr ng-repeat="detail in details" align="center">
<td>{{detail.EmployeeID}}</td>
<td>{{detail.EmployeeName}}</td>
<td>{{detail.EmailID}}</td>
<td>
<button ng-click="getID()" class="btnDelete">Delete Request</button>
</td>
</tr>
</table>
</div>
View the XML data displayed in the HTML table:
<UserDetail>
<Detail>
<EmployeeID>124578</EmployeeID>
<EmployeeName>suresh</EmployeeName>
<EmailID><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e1d1b1c0b1d062e161714400d0103">[email protected]</a></EmailID>
</Detail>
<Detail>
<EmployeeID>587458</EmployeeID>
<EmployeeName>Vivek</EmployeeName>
<EmailID><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e58444f47406e565754004d4143">[email protected]</a></EmailID>
</Detail>
</UserDetail>
Review the AngularJS code:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http.get('myDB.xml')
.then(function (response) {
var x2js = new X2JS();
$scope.details = [];
var data = x2js.xml_str2json(response.data);
$scope.details = data.UserDetail.Detail;
$scope.getID = function () {
var myID = $(".btnDelete").closest('tr').children('td').eq(0).text();
alert(myID);
}
});
});
</script>
I am currently facing an issue where clicking on the "Delete Request" button only displays the first record's Employee ID in the alert, regardless of which button I click. Any suggestions on how to rectify this and display the corresponding record value in the alert?