Read XML and Populate a Drop Down Box

I would like to know how to read XML elements and populate a drop down list with a particular element.

Lico_wAsked: 2011-03-10

Who is Participating?

leakim971PluritechnicianCommented: 2011-03-10

With simple Javascript :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create table from XML</title>
<script type="text/javascript">
	window.onload = function() {
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		xmlhttp.open("GET","depots.xml",false);
		xmlhttp.send();
		xmlDoc = xmlhttp.responseXML; 
		var table = document.createElement("table");	
		table.setAttribute("border", "1");
		var x = xmlDoc.getElementsByTagName("depots");
		for(var i=0;i<x.length;i++) {
			var row = table.insertRow(table.rows.length);
			for(j=0;j<x[0].childNodes.length;j++) {
				if(x[0].childNodes[j].nodeType == 1) {
					var cell = row.insertCell(row.cells.length);
					var text = document.createTextNode( x[0].childNodes[j].getAttribute("attr1") );
					cell.appendChild( text );
				}
			}
	  }
	  document.getElementsByTagName("body")[0].appendChild(table);
	}
</script>
<body>
</body>
</html>

Open in new window

LVL 83

leakim971PluritechnicianCommented: 2011-03-10

Simple tuto here : http://techinitiatives.blogspot.com/2007/01/dynamic-dropdown-list-using-ajax_29.html

Lico_wAuthor Commented: 2011-03-10

I should have been more specific, I've attached my asp code below but it displays nothing. Any ideas? I have also attached a sample XML doc

<html>
<body>

<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","depots.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("depots");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("Depot")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  'document.write(x[i].getElementsByTagName("Depot")[0].childNodes[0].nodeValue);
  'document.write("</td></tr>");
  }
document.write("</table>");
</script>

</body>
</html>

Open in new window

depots.xml

LVL 83

leakim971PluritechnicianCommented: 2011-03-10

malformed XML

your :

<?xml version="1.0"?>

<depots>

	<depot="Aberdeen">
		<address="some address"/>
	</depot>
</depots>

Open in new window

"corrected" :

<?xml version="1.0"?>

<depots>
	<depot attr1="Aberdeen">
		<address attr2="some address"/>
	</depot>
</depots>

Open in new window

Lico_wAuthor Commented: 2011-03-10

Can you post the update to my script to get it to work as i've updated the xml and javascript but still doesn't work

LVL 83

leakim971PluritechnicianCommented: 2011-03-10

you just need a table with a row having its cell with "Aberdeen" inside? That is ?

Lico_wAuthor Commented: 2011-03-10

No I want to read it from the XML. There are lots more elements and values within my full xml, didn't want to publish full depot info online.

If I can get this start point working I can build from that

LVL 83

leakim971PluritechnicianCommented: 2011-03-10

yes but for now what do you want to see from the xml file in the table cell with your sample?

Lico_wAuthor Commented: 2011-03-10

The depot name would be perfect

Lico_wAuthor Commented: 2011-03-10

I.e. Aberdeen

LVL 83

leakim971PluritechnicianCommented: 2011-03-10

With jQuery :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create table from XML</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$.get("depots.xml", function(data) {
			$("body").append("<table border='1'></table>");
			$.each($("depot", data), function() {
				$("table").append("<tr><td>" + $(this).attr("attr1") + "</td></tr>");
			});
		});
	});
</script>
<body>
</body>
</html>

Open in new window

LVL 83

leakim971PluritechnicianCommented: 2011-03-10

Your code << YES IT CAN >> :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create table from XML</title>
<body>
<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","depots.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("depots");
for (i=0;i<x.length;i++)
  { 
			for(j=0;j<x[0].childNodes.length;j++) {
				if(x[0].childNodes[j].nodeType == 1) {
				  document.write("<tr><td>");
				  document.write(x[0].childNodes[j].getAttribute("attr1"));
				  document.write("</td>");
				}
			}
  }
document.write("</table>");
</script>
</body>
</html>