I am looking to populate a table with data from an XML file as shown below:
<table>
<th>Head 1</th><th>Head 2</th><th>Head 3</th>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
All three columns of the table should be filled with unique data from the XML file. I have attempted this, but I can only see one data entry from the file instead of all rows being filled with distinct values. Also, once new XML files are added to the folder, the old XML data should be replaced entirely by the new XML data.
Below is the HTML and jQuery code snippets that I have implemented. HTML File
<div>
<table class="status_table">
<th class="table_heading">Heading 1</th>
<th class="table_heading" style="text-align:center; padding:30px;">Heading 2</th>
<th class="table_heading" style="text-align:center; padding:30px;">Heading 3</th>
<tr></tr>
</table>
</div>
jQuery File
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
$(document).ready(function(){
truckData();
fetch();
})
function fetch(){
setTimeout(function(){
truckData();
fetch();
},100)
}
function truckData(){
$.ajax({
url: "20200707083610.xml",
dataType: "",
success: function(data){
$("tr").children().remove();
$(data).find("DisplayData").each(function(){
var info = '<td class="table_content" style="color: #DB075C;">'+$(this).find("LaneName").text()+'<td class="table_content" style="color: #FFFF00;">'+$(this).find("PlateNumber").text()+'<td class="table_content" style="color: #3107DB;">'+$(this).find("BayName").text();
$("tr").append(info);
});
}
})
}
XML File
<DisplayRequestData>
<DisplayData displayPort="d-01">
<LaneName>Lane 1</LaneName>
<PlateNumber>7709</PlateNumber>
<BayName>ABCD 1</BayName>
</DisplayData>
<DisplayData displayPort="d-02">
<LaneName>Lane 2</LaneName>
<PlateNumber>5652</PlateNumber>
<BayName>XYZA 0012</BayName>
</DisplayData>
<DisplayData displayPort="d-03">
<LaneName>Lane 3</LaneName>
<PlateNumber>XR-20398</PlateNumber>
<BayName></BayName>
</DisplayData>
</DisplayRequestData>