I'm relatively new to ajax and I am currently attempting to showcase data in a table within a JSP file.
The API is being called using AJAX.
The controller passes the following response:
BatchwiseStudent [name=Ram, course=MCA (Commerce), <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c49414d45406548115e4d41414d425f5b4d404d6c4b414d4540024f4341">[email protected]</a>, placed=null, batch=2016, mobileNo=7.276339096E9]
In the JSP page:
<script type="text/javascript">
function getStudentDetails(){
$batch = $('#batch');
$course = $('#course');
$.ajax({
type: "GET",
url: "./batchAjax?batchId="+$batch.val()+"&courseId="+$course.val(),
success: function(data){
console.log("SUCCESS ", data);
if(data!=null){
$("#batchwiseTable").find("tr:gt(0)").remove();
var batchwiseTable = $("#batchwiseTable");
$.each(JSON.parse(data),function(key,value){
console.log(key + ":" + value);
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['name']);
rowNew.children().eq(2).text(value['emailId']);
rowNew.children().eq(3).text(value['placed']);
rowNew.children().eq(4).text(value['batch']);
rowNew.children().eq(5).text(value['mobileNo']);
rowNew.appendTo(batchwiseTable);
});
$("#batchwiseTable").show();
}
},
error: function(e){
console.log("ERROR ", e);
}
});
}
</script>
Although I can see a new row in the table, unfortunately there is no data displayed. I would like the columns to contain information such as name, email, mobile number, etc.
Could someone kindly assist me in identifying where I may have gone wrong?