Question

Can anyone tell me or provide a full (but simple) example on how to get the value of an XML node and plot (output) it into a specific HTML element.

I have spent hours trying to look this up, but nothing works for me or examples are incomplete.

Also, note that I neither require nor desire use of the “.each” method or any loops. I just want to singularly grab one node value and put it into one html element, however I would love to have an example of what is in both files (xml and javascript), as well as how to open the xml document. I have seen examples of opening the xml document, but they are different from eachother so there is no way for me to know which one actually works.

I have also done some testing on this, but can’t seem to get it to plot anything.

Answer 1

Main thing you need to understand is how the DOM works. If you do not know how the DOM works, you can find some info here

In essence you’re dealing with parent tags and children tags. With XML, you need to extract that information and from there you can do whatever you like.

If you go here to the left handside bar there are lots of examples and tutorials on how to manipulate XML DOM nodes

Here are just a couple things to know though (my professor taught me this and they’re useful tips)

1. You can’t use ids or classes. Instead you should be getting the XML nodes with

   var elements = node.getElementsByTagName("tagname");

2. You can’t use innerHTML to get the text inside a node. You could in HTML, but not for XML. For that you have to use

   var text = node.firstChild.nodeValue;

3. You can’t use .attributeName to get an Attribute. You need to use

   var attrValue = node.getAttribute("attrName");

Hope this helps. If you’re still struggling, just ask.

Alright well I’ve been trying to work with the examples on w3schools and I hope this helps. If it doesn’t just ask:

Go to this example

I’m going to try to walkthrough this example but you should be getting a general idea of what’s going on. They have an XML file known as cd_catalog.xml with all the information they need. When they press the button it simply displays all that information in an HTML format. If you look at the HTML code before and after you can see that the myDiv gets populated with all the artists in the xml file.

Now let’s look at the code.

function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}

Some key things to point out. Step-by-step they have a function so when the document is fully loaded, and the code has been sent (this is checked by xmlhttp.status==200) he’s going to pull all the xml data from cd_catalog.xml and store it into xmlDoc by getting the xmlhttp.responseXML

So now xmlDoc has all the information from cd_catalog.xml stored in a convenient variable. From there, he uses xmlDoc.getElementsByTagName("ARTIST"); to get an array of ALL the artists in the xml file and nothing else. He names this array x.

Now he goes through this giant array known as x and for each index i (represented as x[i]) he gets the childNodes which returns an array with only one thing inside it (the text) which is why he refers to childNodes[0] index and he gets the .nodeValue of it. So NOW he has the text that was originally stored in the xml file in a variable called txt and he simply adds a </br> tag and whatever else HTML he wants and puts it via document.getElementById("myDiv").innerHTML so that it is translated into HTML format. This process repeats for each ARTIST tag in the xml file.

I hope this helps. If you’re still confused, let us know. And this does require you to know the xml file you’re handling and where it is.