How do I extract data from XML

[spoken]

Hi,

I quite new to Javascript and XML. Here a is snippet of my XML file.

<xml>
<cd>
    <rock>
        <item id='1'>
            <name>Bon Jovi</name>
            <price>$10</price>
            <description>abc</description>
        </item>
        <item id='2'>
            <name>U2</name>
            <price>$11</price>
            <description>abc</description>
        </item>
        <item id='3'>
            <name>Linkin Park</name>
            <price>$12</price>
            <description>abc</description>
        </item>
    </rock>
    <pop>
        <item id='1'>
            <name>Nelly</name>
            <price>$5</price>
            <description>abc</description>
        </item>
        <item id='2'>
            <name>Justin</name>
            <price>$5</price>
            <description>abc</description>
        </item>
    </pop>
</cd>
</xml>
 

I am working with javascript.
Basically I have 2 problems.
1. How do I just get the 'name' from all the items in <rock> tags?
2. How do I get the the 'name' from a specific position node? For example, I want to get the name of the artist in <rock> from node 1 onwards. -> Expected output: U2, Linkin Park.

Thanks so much in advance.

Regards,
Gordon

[dmjpro]

actually where this file exists??

debasis

[acoder]

Gordon, welcome to TSDN!

Check out this link. You'll want to make use of the document.getElementsByTagName() method.

[spoken]

Hi acoder,

I've seen that link. However, I just want to get the 'name' for the items in <rock>.
I have tried
xmldoc.getElementsByTagName('items')
but that gives me all the items, including those in <pop>.

dmjpro,
the file is a seperate xml and the javascript is in my html document. I manage to successfully load the xml already.

[dmjpro]

Hi acoder,

I've seen that link. However, I just want to get the 'name' for the items in <rock>.
I have tried
xmldoc.getElementsByTagName('items')
but that gives me all the items, including those in <pop>.

dmjpro,
the file is a seperate xml and the javascript is in my html document. I manage to successfully load the xml already.

have a look at this ............

var parent = xmldoc.getElementsByTagName('rock'); //get the parent node
if(parent[0].childNodes.length){
var child1 = parent[0].childNodes[0].getAttribute('name'); //if there is any child nodes
}
 

have the same repetition ...... until the childnodes end.

debasis

[spoken]

have a look at this ............

var parent = xmldoc.getElementsByTagName('rock'); //get the parent node
if(parent[0].childNodes.length){
var child1 = parent[0].childNodes[0].getAttribute('name'); //if there is any child nodes
}
 

have the same repetition ...... until the childnodes end.

debasis

Hi debasis,

Thanks for your reply.
I've tried your code and I can't get any output. This is wat I wrote.

var parent = xmldoc.getElementsByTagName('rock'); //get the parent node
alert(parent);
if(parent[0].childNodes.length){
    var child1 = parent[0].childNodes[0].getAttribute('name'); //if there is any child nodes
}
alert(child1);

I get "HTMLCollection" for the first alert and nothing comes out for the second, and I'm using the exact XML file as above. I tried to print the whole xml file and it comes out fine.

[gits]

hi ...

try the following adaption:

var p = xmldoc.getElementsByTagName('rock');
 
alert(p);
 
if (p[0].childNodes.length) {
    var child1 = p[0].getElementsByTagName('item')[0];
    var c_name = child1.getAttribute('name'); 
}
 
alert(c_name);

kind regards

[spoken]

hi ...

try the following adaption:

var p = xmldoc.getElementsByTagName('rock');
 
alert(p);
 
if (p[0].childNodes.length) {
    var child1 = p[0].getElementsByTagName('item')[0];
    var c_name = child1.getAttribute('name'); 
}
 
alert(c_name);

kind regards

Hi Gits,

I tried your code adaption. I can't do child1.getAttribute('name') because name is not an attribute but a tag. However if I do child1.getAttribute('id'), I can extract the ID of the item.

But I need to get the value of the <name> tag.. :(

This is driving me bonkes.. Thanks for the help...

Regards,
Gordon

[acoder]

Hi Gits,

I tried your code adaption. I can't do child1.getAttribute('name') because name is not an attribute but a tag. However if I do child1.getAttribute('id'), I can extract the ID of the item.

So, use getElementsByTagName() again on child1 (which is item) to get the name. That would give you the first name. Use a loop to get all the names of all items.

[Ferris]

Hi

I just wrote a complete sample code for you~~ It takes me a little long time..

first:save your xml data to file :cd.xml
second:create a new html file, make sure these two files are in the same directory.
then:paste my code into html file.

end:open html file and click the button.


[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="javascript">
function readxml(xmlfile)
{
var xmlDoc;
if (window.ActiveXObject){
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
}
else if (document.implementation && document.implementation.createDocument){
xmlDoc= document.implementation.createDocument("","doc",nu ll);
}
if (typeof xmlDoc!="undefined"){
xmlDoc.load(xmlfile);
}
if (window.ActiveXObject)
{
//for IE
var rock = xmlDoc.getElementsByTagName("rock")[0];
if (rock != null)
{
var rockitem = rock.getElementsByTagName("item");
for (var i=0;i<rockitem.length;i++)
{
var id = rockitem[i].getAttribute("id");

var name = rockitem[i].getElementsByTagName("name")[0].firstChild.nodeValue;
var price = rockitem[i].getElementsByTagName("price")[0].firstChild.nodeValue;
var description = rockitem[i].getElementsByTagName("description")[0].firstChild.nodeValue;
document.getElementById("divrock").innerHTML += "item " + i + "<br />";
document.getElementById("divrock").innerHTML += "name:" + name + "<br />";
document.getElementById("divrock").innerHTML += "price:" + price + "<br />";
document.getElementById("divrock").innerHTML += "description:" + description + "<br />";
}
}
var pop = xmlDoc.getElementsByTagName("pop")[0];
if (pop != null)
{
var popitem = pop.getElementsByTagName("item");
for (var i=0;i<popitem.length;i++)
{
var id = popitem[i].getAttribute("id");

var name = popitem[i].getElementsByTagName("name")[0].firstChild.nodeValue;
var price = popitem[i].getElementsByTagName("price")[0].firstChild.nodeValue;
var description = popitem[i].getElementsByTagName("description")[0].firstChild.nodeValue;
document.getElementById("divpop").innerHTML += "item " + i + "<br />";
document.getElementById("divpop").innerHTML += "name:" + name + "<br />";
document.getElementById("divpop").innerHTML += "price:" + price + "<br />";
document.getElementById("divpop").innerHTML += "description:" + description + "<br />";
}
}
}
else if (typeof xmlDoc!="undefined"){
// for firefox
xmlDoc.onload = function (){
var rock = xmlDoc.getElementsByTagName("rock")[0];
if (rock != null)
{
var rockitem = rock.getElementsByTagName("item");
for (var i=0;i<rockitem.length;i++)
{
var id = rockitem[i].getAttribute("id");

var name = rockitem[i].getElementsByTagName("name")[0].firstChild.nodeValue;
var price = rockitem[i].getElementsByTagName("price")[0].firstChild.nodeValue;
var description = rockitem[i].getElementsByTagName("description")[0].firstChild.nodeValue;
document.getElementById("divrock").innerHTML += "<strong>item</strong> " + i + "<br />";
document.getElementById("divrock").innerHTML += "<strong>name</strong>:" + name + "<br />";
document.getElementById("divrock").innerHTML += "<strong>price</strong>:" + price + "<br />";
document.getElementById("divrock").innerHTML += "<strong>description</strong>:" + description + "<br />";
}
}
var pop = xmlDoc.getElementsByTagName("pop")[0];
if (pop != null)
{
var popitem = pop.getElementsByTagName("item");
for (var i=0;i<popitem.length;i++)
{
var id = popitem[i].getAttribute("id");

var name = popitem[i].getElementsByTagName("name")[0].firstChild.nodeValue;
var price = popitem[i].getElementsByTagName("price")[0].firstChild.nodeValue;
var description = popitem[i].getElementsByTagName("description")[0].firstChild.nodeValue;
document.getElementById("divpop").innerHTML += "<strong>item</strong> " + i + "<br />";
document.getElementById("divpop").innerHTML += "<strong>name</strong>:" + name + "<br />";
document.getElementById("divpop").innerHTML += "<strong>price</strong>:" + price + "<br />";
document.getElementById("divpop").innerHTML += "<strong>description</strong>:" + description + "<br />";
}
}
};
}
}
</script>
<body>
<h1>read xml file</h1>
rock
<div id="divrock" style="margin-left:10px; "></div>
pop
<div id="divpop" style="margin-left:10px; "></div>
<input type="button" value="read" onclick="readxml('cd.xml');"/>
</body>
</html>

[/HTML]



by the way:
1:the code can be run in IE and firefox.
2:pay attention to onclick="readxml('cd.xml'); , the "cd.xml" will tell javascript where your xml file is.if your xml file isn't "cd.xml",change the parameter.
3:pay attention to the following code,I guess these code are what you're looking for:

[HTML]
var rockitem = rock.getElementsByTagName("item");
for (var i=0;i<rockitem.length;i++)
{
var id = rockitem[i].getAttribute("id");
var name =
rockitem[i].getElementsByTagName("name")[0].firstChild.nodeValue;
var price =
rockitem[i].getElementsByTagName("price")[0].firstChild.nodeValue;
var description =
rockitem[i].getElementsByTagName("description")[0].firstChild.nodeValue;
}
[/HTML]


hope it helps :)

[spoken]

Wow..
Thank you so much Ferris.. I was going around in endless circles trying to transverse my XML file.

I guess the code that I didn't manage to get was:

      var p = xmldoc.getElementsByTagName('rock');
      if (p[0].childNodes.length) {
          var child1 = p[0].getElementsByTagName('item')[0]; //child1 => item 0
          var c_name = child1.getElementsByTagName('name')[0].firstChild.nodeValue;          
      }
 

Thanks again for your effort. I think I'm getting it a lil better now..

Regards,
Gordon