XML AND JQUERY

pallone · July 8th, 2009, 12:48 PM

Hi,

I would appreciate very much if someone could shed some light on how to retrieve a nodeset from an xml document - not the value - and then append the elements within the nodeset to a new xml tree with JQUERY.

By the way, is it possible to create an empty xml document using JQUERY???

I have tried the code below but it is not working as expected. I am not sure how to loop to get all nodes from the set.

$(document).ready(function() {
//debugger
$.get("labels.xml", function(xml) {
//var text = $("name", xml).text();
var text = $("name", xml);
alert(text[0].xml)
//debugger
$("div#xml").html("<Names>" + text[0].xml + "</Names>");
});
});

This is what I get from this code and as you can see, the xml is not well formed.
<DIV id="xml">
<NAMES></NAMES><NAME></NAME>Claudio Pallone</NAME><//NAME></NAMES><//NAMES>
</DIV>

XML USED

<?xml version="1.0" encoding="utf-8"?>
<labels>
<label id='ep' added="2003-06-10">
<name>Ezra Pound</name>
<address>
<street>45 Usura Place</street>
<city>Hailey</city>
<province>ID</province>
</address>
</label>
<label id='tse' added="2003-06-20">
<name>Thomas Eliot</name>
<address>
<street>3 Prufrock Lane</street>
<city>Stamford</city>
<province>CT</province>
</address>
</label>
<label id="lh" added="2004-11-01">
<name>Langston Hughes</name>
<address>
<street>10 Bridge Tunnel</street>
<city>Harlem</city>
<province>NY</province>
</address>
</label>
</labels>

Cheers

C

samjudson · July 8th, 2009, 02:51 PM

text[0] returns a DOMElement, so the method text() does not exist on it. To get access to the text() method you would need either iterate over the nodes using .each() or wrap the new DOMElement in the jquery code:

Code:

$(document).ready(function() {
           $.get("labels.xml", function(xml) {
                 var nodes= $("name", xml);
                 $("div#xml").html("<Names>" + $(nodes[0]).text() + "</Names>");
           });
 });

pallone · July 8th, 2009, 06:08 PM

Hi

Thanks a lot for your reply and sample code.

This is what is being produced by your code. As you can see, this is not the result I was expecting.

<div id="xml">
<names>
Claudio Pallone
</names>
</div>

I would like to build a tree with all name elements and their children from the xml.

Something like:

<names>
<name>Ezra Pound</name>
<name>Thomas Eliot</name>
<name>Langston Hughes</name>
</names>

the text() method gets only the text of the element but not the node and its children. Basically, I am trying to build an xml document.

You mentioned that I could loop each element using the each() method. I was wonderinf if you could provide some source code for us to see how to do that using the xml.

Cheers

C

samjudson · July 9th, 2009, 02:42 AM

Well you didn't actually list what you where expecting, so there is little surprise my example didn't produce it.

Code:

$(document).ready(function() {
    $.get("labels.xml", function(xml) {
        var nodes= $("name", xml);
        var names = $("<names/>");

        $(nodes).each(function() {
            names.append("<name>" + $(this).text() + "</name>");
        });
                 
        $("div#xml").append(names);
    });
});

pallone · July 9th, 2009, 06:18 AM

Hi samjudson,

Thank you very much for all your assistance with this issues. It is really appreciated.

Sorry for not listing what I was expecting and for not being more clear.

I have seen your new sample code and it works fine if the name element has no attributes or other children since the code hard code the name element. However, for a more complex structure it would not work.

Is it possible to adjust the code around to instead of hard coding the name of the element, we would get it dynamically and include its attributes and child nodes?

For example, the address element of the xml looks like this:

<address id="1">
<street>45 Usura Place</street>
<city>Hailey</city>
<province>ID</province>
</address>

How do I grab all the address elements from the xml with all its attributes and child nodes and append it to a new xml document with a <Locations> root element?

<Locations>
<address id="1">
<street>45 Usura Place</street>
<city>Hailey</city>
<province>ID</province>
</address>
<address id="2">
<street>3 Prufrock Lane</street>
<city>Stamford</city>
<province>CT</province>
</address>
<address id="3">
<street>10 Bridge Tunnel</street>
<city>Harlem</city>
<province>NY</province>
</address>
</Locations>

Thanks again

XML
-------

<?xml version="1.0" encoding="utf-8"?>
<labels>
<label id='ep' added="2003-06-10">
<name>Ezra Pound</name>
<address id="1">
<street>45 Usura Place</street>
<city>Hailey</city>
<province>ID</province>
</address>
</label>
<label id='tse' added="2003-06-20">
<name>Thomas Eliot</name>
<address id="2">
<street>3 Prufrock Lane</street>
<city>Stamford</city>
<province>CT</province>
</address>
</label>
<label id="lh" added="2004-11-01">
<name>Langston Hughes</name>
<address id="3">
<street>10 Bridge Tunnel</street>
<city>Harlem</city>
<province>NY</province>
</address>
</label>
</labels>

samjudson · July 9th, 2009, 06:58 AM

Once you've loaded the XML its just like navigating an HTML document. So ask yourself how would you iterate over a list of DIV elements, gets their width attribute, and then find out what children it has?

Well the same is true here. So you use find(), children(), attr() and all the other jquery goodness to do what you want. If you want name of the current element then just use its name property.

pallone · July 9th, 2009, 10:36 AM

Hi samjudson,

Based on your sample code and suggestions I have tried the code below but it is not working as expected. It gets the text of the address element but not the xml.

I have tried to remove the text() method call but to no avail

location.append($(this).text());

location.append($(this));

Could you please shed some light on how to get the xml of an object in JQUERY?

$(document).ready(function() {
$.get("labels.xml", function(xml) {
var nodes = $("address", xml);
var location = $("<Location/>");

$(nodes).each(function() {
location.append($(this).text());
//location.append($(this));
});

$("div#xml").append(location );
});
});

This is what this code is producing:

<location>

45 Usura Place Hailey ID 3 Prufrock Lane Stamford CT 10 Bridge Tunnel Harlem NY 7 Heaven's Gate Idoto Anambra

</location>

I am looking forward to your reply.

Cheers,

C

samjudson · July 10th, 2009, 03:43 AM

try something like

location.append("<" + this.name + ">" + $(this).text() + "</" + this.name + ">");

pallone · July 10th, 2009, 05:56 AM

Hi

I have changed the code as per your suggestion but I get undefined tags in FF and in IE.

IE seems to close the tags in the wrong place and FF does not respect the case of tags.

Do you think this is happening because we are working with a string of xml?

Cheers

IE RESULT
--------------------

<Location><UNDEFINED></UNDEFINED>45 Usura PlaceHaileyID</UNDEFINED><//UNDEFINED><UNDEFINED></UNDEFINED>3 Prufrock LaneStamfordCT</UNDEFINED><//UNDEFINED><UNDEFINED></UNDEFINED>10 Bridge TunnelHarlemNY</UNDEFINED><//UNDEFINED><UNDEFINED></UNDEFINED>7 Heaven's GateIdotoAnambra</UNDEFINED><//UNDEFINED></Location>

FF RESULT
------------------
<location>
<undefined>
45 Usura Place Hailey ID
</undefined>
<undefined>
3 Prufrock Lane Stamford CT
</undefined>
<undefined>
10 Bridge Tunnel Harlem NY
</undefined>
<undefined>
7 Heaven's Gate Idoto Anambra
</undefined>
</location>

samjudson · July 10th, 2009, 06:22 AM

well obviously this.name isn't a valid property, so try finding the correct property and using that. I've given you all the help I think you need and I think it would help you much more if you tried to finish this last little bit on your own.