I have a database filled with descriptions and corresponding ID numbers. The table displays them like this:
index.jsp
<table>
<tr>
<td>Name:</td>
<td>Id:</td>
</tr>
<c:forEach items="${employee}" var="employee">
<tr>
<td><c:out value="$employee.description"></c:out></td>
<td class="id-value" id="id"><c:out value="$employee.id"></c:out></td>
</tr>
</c:forEach>
</table>
The above code successfully populates the table with all values. I also have a service that can retrieve the first name and last name of an employee based on their ID, which I would like to dynamically add to the table when the page loads. This removes the need to store additional information in the database. Here is my current implementation:
function.js
$(document).ready(function(request, response) {
var id = $('#id').text();
var serviceUrl = 'http/service/example';
$.ajax({
type: 'GET',
url: serviceUrl + id,
cache: true,
success: function(data) {
$.map(JSON.parse(data), function(item) {
$('td.id-value').append(' ' + item.FNAME + ' ' + item.LNAME);
});
}
});
});
Upon loading the page, the ID column displays the correct ID numbers. However, the first name and last name appended to each ID are identical and repeated (belonging to the first ID). How can I ensure that the AJAX call is made for each individual ID in the column?
JSON response
{FNAME: "FIRSTNAME", LNAME: "LASTNAME"}