Injecting an XML document contents into a HTML table

JavaScript
,
1

Currently trying to inject the entirety of an XML document into a predefined HTML table, but I’m not having any luck. I’ve managed to get it working by literally copy and pasting the whole document to be a rawXML variable but that’s not what I’m looking to do.

I’ll post a shortened down version of the XML document because it’s a bit long:

<?xml version="1.0" encoding="UTF-8"?>
<product top-level-category="DSLR" sub-level-category="Camera Bundles">
<id>0001</id>
    <title>NIKON D3300 DSLR Camera with 18-55 mm f/3.5-5.6 II ED Zoom Lens – BlacK</title>
    <brand>Nikon</brand>
    <price>279.00</price>
    <description>The Nikon D3300 DSLR Camera with 18-55 mm f/3.5-5.6 II ED Zoom Lens allows you to capture special moments in glorious high quality. Unforgettable memories, unforgettable photos. Small and lightweight, the D3300 has a 24.2 megapixel, 23.5 x 15.6 mm CMOS sensor with remarkable light sensitivity that produces amazingly sharp images. It performs well in low light with an ISO range of 100 to 12800 (extendable to 25600). Your images will be packed with fine textures and natural colours to really capture the atmosphere of whichever situation you find yourself in. Capture clear, colourful photographs in all manner of lighting conditions as the camera's EXPEED 4 image processor goes to work, delivering gorgeous photos every time.</description>
    <spec>
	<megapixels>24.2</megapixels>
	<sensor>23.5 x 15.6 CMOS</sensor>
	<iso>Auto, 100-12800</iso>
	<lens_mount>Nikon F Mount</lens_mount>
    </spec>
 <picture>0001.jpg</picture>
 <carousel>1</carousel>
</product>

However, all I need from the XML file is the:

  • ID
  • Title
  • Brand
  • Price
  • Description

And currently the code I’ve got for my not working table in jQuery is:

<script>
			// Call in the document
			$(document).ready(function() {
				$.ajax({
				type: "GET",
				url: "productXmlStructure.xml",
				dataType: "xml",
				
				// Populate the nav bar
				populateNav("navmenu");
				
				// Check if page called from a product page and add anchor to breadcrumb
				var vars = [], hash;
				var q = document.URL.split('?')[1];
				
				if (q != undefined)
				{
					q = q.split('&');
					for (var i = 0; i < q.length; i++)
					{
						hash = q[i].split('=');
						vars.push(hash[1]);
						vars[hash[0]] = hash[1];
					}
				}
				
				if (vars["id"] != undefined)
				{
					$('#breadCrumb').append(' - <a href="product.html?id=' + vars['id'] + '">Return to product page</a>');
				}
				
				if (vars["searchTerm"] != undefined)
				{
					// There is a search term
					$('#searchTerm').val(vars['searchTerm']);
					
					// Add you table population code here
					var XML = 'productXmlStructure.xml'
					var xmlParsed = $.parseXML(XML);
					var xmlProd = $(xmlParsed).find('product');
					var xmlRow = XML.find('ID');
					$(xmlRow).each(function() {
					for (var i=0; i < 3; i++) {
					$('mainBody').append($(this).find('ID' + i).text()).append('<br/>');
					}
				});
				}
				else
				{
					// WE DO NOT HAVE A SEARCH TERM????
				}
			});

And my code for a HTML table is also standard:

<div id="mainBody">
		<br>
			<table id="t01" table border="2" style="width:75%" table align="center">
			  <tr>
				<th>ID</th>
				<th>Title</th>
				<th>Brand</th>
				<th>Price</th>
				<th>Description</th>
			  </tr>
			</table>
		</div>

I’ve tried by adding different jQuery libraries before I realised I’m not allowed to have any other than my predefined one, so I’m at a stand still - any help?

1 Like
2

So where are the standard <thead> and <tbody> tags that standard tables use.

3

The JavaScript posted is invalid. That might be part A of the problem.

4

That’s correct, but unhelpful. It’s this section of code that isn’t right.

$.ajax({
  type: "GET",
  url: "productXmlStructure.xml",
  dataType: "xml",

  ....

Best to create a function to handle the response xml.

var receivedXML = function(resp) {
  console.log(resp);
}

$.ajax({
  type: "GET",
  url: "productXmlStructure.xml",
  dataType: "xml",
  success: receivedXML
})

Try running this code and then looking at the response in the console.

This part of code isn’t correct either, parseXML isnt’ expecting a url of an xml document, it’s expecting a string of XML like <tag><a><b>blah</b></a></tag>

var XML = 'productXmlStructure.xml'
var xmlParsed = $.parseXML(XML);

Because you’re using dataType: ‘xml’, jQuery will already be parsing the returned XML string from the response into a parsed XML document. So, in the first function at the top resp should be an XML document that you can search through.

2 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.