CODEWITHSUNDEEP
jquerydom
Jono
Jono

Reputation: 1750

How to query an XML string via DOM in jQuery

I would like to take a string and treat it as XML. Then I will be able to query with DOM via the jQuery.find. Everything was working fine in Firefox, but I realized this is not working in IE.

I am doing this:

  var t = "<div><outer><inner>abc</inner><inner>def</inner></outer></div>";
  alert("[" + $(t).find("outer").html() + "]");

In Firefox 3 it prints:

[<inner>abc</inner><inner>def</inner>]

In IE 7 it prints:

[]

Any workarounds for getting this to work across browsers?

Thanks.

Upvotes: 4

Views: 17785

Answers (8)

Sheikh Ali
Sheikh Ali

Reputation: 1544

Put the the XML string into a Javascript variable:

var xmlString = $('<?xml version="1.0"?><Customers><Customer Name="Allan Border" Age="26" ContactNumber="004416165245" Address="Unit # 24 East London" City="London" Country="England"></Customer><Customer Name="Jennifer" Age="28" ContactNumber="004416165248" Address="Unit # 28 West London" City="London" Country="England"></Customer></Customers>');

Now you can parse the XML by iterating through each of the customer nodes:

$(xmlString).find("Customer").each(function () {
 var customerName = $(this).attr("Name");
 var age = $(this).attr("Age");
 var contactNumber = $(this).attr("ContactNumber");
 var address = $(this).attr("Address");
 var city = $(this).attr("City");
 var country = $(this).attr("Country");
 });

Upvotes: 3

Appeloappelo
Appeloappelo

Reputation: 11

In Javascript for Selenium reading XML file in browser:

function loadXMLFromDOM2XMLString( xmlString, xmltag, currentChildNode ) { 
var nodes = currentChildNode.childNodes; 
var i = 0 ;
var node = nodes[i];
while ( i < nodes.length) {
   if (node.data == null) {xmltag = '<'+node.localName+'>';} else {xmltag = node.data;};
   xmlString = xmlString  + xmltag;
   xmlString = loadXMLFromDOM2XMLString( xmlString, xmltag, node  );   
   if (node.data == null) {xmltag = '<'+'/'+node.localName+'>';} else {xmltag = "";};
   xmlString = xmlString + xmltag;
   i++;
   node = nodes[i];
}
 return xmlString ;
} ;
var xmlString = "";
var xmltag = "";

var currentChildNode = window.document;

xmlString = loadXMLFromDOM2XMLString( xmlString, xmltag, currentChildNode );
xmlString;

Upvotes: 1

Jono
Jono

Reputation: 1750

It's been a while, but I just realized that I forgot to post how I solved the problem with your combined ideas.

I needed an entirely client side database (no PHP).

I created a div with an HTML comment in it containing the XML. I parsed the HTML comment with this and then I converted the XML to JSON with this.

   var xmltext = $("#piecelist").comments();
   var json = $.xml2json(xmltext.html());

You can see my method in action here: http://wesculpt.net/art.html

Maybe I should turn this method into a jQuery plugin.

Thanks for all your help everyone.

Upvotes: 0

KyleFarris
KyleFarris

Reputation: 17548

Would it be possible to store the XML as JSON (I would assume it would be)? For instance, in PHP, you can convert XML to an Array or Object and then convert that into JSON with json_encode. You could then echo that out as a javascript variable like so:

In PHP:

<?php
$xml = "<div><outer><inner>abc</inner><inner>def</inner></outer></div>";
$xml_object = simplexml_load_string(xml);
$json = json_encode($xml_object);
?>
<script language="javascript">
$(function() {
    // eval() is okay to use if you know where the JSON is 
    // coming from (and, of course, you do...) 
    var data = eval('<?php echo $json; ?>');
    $(document).data('myapp.data',data);
});
</script>

And now, whenever you need to access that data, you can just get it like so:

function some_function() {
    var data = $(document).data('myapp.data');
    $.each(data.div.outer,function() {
        // Would alert 'abc' then 'def'
        alert(this.inner);
    });
}

I hope all that makes sense. At least you won't have to worry about XML anymore on the client side. Of course, if you absolutely need to, I've found that this has worked for me in the past:

var xml = "<div><outer><inner>abc</inner><inner>def</inner></outer></div>";
var $xml = $('<div />').append(xml);
alert("[" + $xml.find("outer").html() + "]");

Edit I modified my code to use the actual XML you provide--not sure where I mixed up there (must've grabbed the snippet from someone else's answer on accident). You should really give my first suggestion a shot--it should work.

Upvotes: 4

Goyuix
Goyuix

Reputation: 24340

So what about instead of storing the XML dataset in the DOM, convert it to an HTML table and make it invisible. That should solve the jQuery problems... at least the browser specific issues. Then back to work on refining your selectors.

Upvotes: 0

redsquare
redsquare

Reputation: 78667

With string xml in ie you need to use .filter as it doesnt want to recognise the xml node tree.

Try this in ie8 with the debugger visible to get the console output.

Upvotes: 0

Jose Basilio
Jose Basilio

Reputation: 51478

There are a 2 ways to approach this.

  1. Convert the XML string to DOM, parse it using this plugin or follow this tutorial
  2. Convert the XML to JSON using this plugin.

Upvotes: 9

Goyuix
Goyuix

Reputation: 24340

First off, the jQuery constructor takes HTML not XML... that being said, your XML may work - but it depends on a lot of browser dependent behavior. Also, you may have better success by appending the newly created elements to a hidden element on the page somewhere and then trying to query it:

var xml = "<books><book><title>Title</title></book></books>";
$(xml).appendTo("#hidden");
alert($("#hidden books").length);

Upvotes: 1

Related Questions