I am currently working on integrating an XML file into my HTML and displaying it in a table. A snippet of the XML is provided below:
<?xml version="1.0" encoding="UTF-8"?>
<product category="DSLR" sub-category="Camera Bundles">
<id>0001</id>
<title>Canon EOS Rebel T6 DSLR Camera Bundle with EF-S 18-55mm f/3.5-5.6 IS II Lens + Canon EF 75-300mm f/4-5.6 III Lens</title>
<brand>Canon</brand>
<price>399.99</price>
<description>The Canon EOS Rebel T6 DSLR Camera Bundle allows you to capture stunning moments with exceptional quality. This compact camera features an 18-megapixel CMOS sensor, delivering sharp images even in low-light conditions. With an ISO range of 100 to 6400 (expandable to 12800), you can take clear and detailed photos in any lighting. The DIGIC 4+ image processor ensures fast performance and vibrant colors, making every photo memorable.</description>
</product>
Based on the ID, title, brand, price, and description tags, I have attempted to write jQuery code to link them to the table, but I am facing difficulties in making it work.
$(document).ready(function() {
$.ajax({
type: "GET",
url: "productsXmlStructure.xml",
dataType: "xml",
success: function(xml){
$('#t01').append('<th>ID</th>');
$('#t01').append('<table id="show_table">');
$(xml).find('show').each(function(){
var $show = $(this);
var id = $show.find('ID').text();
var title = $show.find('Title').text();
var brand = $show.find('Brand').text();
var price = $show.find('Price').text();
var desc = $show.find('Description').text();
});
}
});
});
I have limited knowledge in this language, but I have included my table structure below. I would appreciate any assistance in identifying where I may be going wrong.
<table id="t01" border="2" style="width:75%" align="center">
<tr>
<th>ID</th>
<th>Title</th>
<th>Brand</th>
<th>Price</th>
<th>Description</th>
</tr>
</table>