First off, we need to add a function created by John Resig (http://ejohn.org/blog/javascript-array-remove/), which will allow us to remove items from an array.
Array.prototype.remove = function(fr, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
And now we need to extend our XML to string function, as in good XML you tend to get the first line starting with a "
jQuery.XMLtoString = function(xmlData) {
var xData;
var xSplit;
if (window.ActiveXObject) {
xData = xmlData.xml;
} else {
xData = (new XMLSerializer()).serializeToString(xmlData);
}
xSplit = xData.split('\r\n');
if (xSplit[0].substr(0, 5) == ' xSplit.remove(0);
return xSplit.join('\r\n');
}
Now I have only just thrown this together, it works, however I will be making some changes to it at a later date by making use of some Regex, as well as giving you the ability to re-add the line you are removing. Anyway, let's give an example XML structure:
Scenario:
You want to copy all of the address tags, including all attributes and child nodes, onto a new location on a different XML object. Resulting in something like this:
45 Usura Place
Hailey
ID
3 Prufrock Lane
Stamford
CT
10 Bridge Tunnel
Harlem
NY
This is a fairly easy task, however the way you go about doing it, is not very obvious. Let's say you have done your AJAX request, received your XML, and have now passed the xml to your function. Here's what you should have inside your function.
Firstly, we need to convert our XML into a string (with the modified function), find our "address" tags, and convert the string into an object. You can do that all in a single line:
var xData = $($.XMLtoString(xml)).find("address");
If you are not already aware of this, encapsulating a string with $(), converts it to an object (with jQuery).
Now we have all the data we want from the XML document, but we need to create our new XML document to contain the data within. Now for some reason (which I am yet to investigate), the first element in a newly created object is removed upon creation, so we need to keep this in mind when creating it. We want a root of "
var xDoc = $("");
Next we need to specify where inside this new document, to inject our original data, which is done with a simple find() like so:
xDoc.find("locations").append(xData);
That's it, our data has been added to the new object. You can print it out to a textarea to view the results by calling the .html() function on the new document, so something like this:
$("#output").text(xDoc.html());
Here is what the resulting function would look like:
function parseXml(xml) {
var xData = $($.XMLtoString(xml)).find("address");
var xDoc = $("");
xDoc.find("locations").append(xData);
$("#output").text(xDoc.html());
}
As I said earlier, it's not very obvious, but when you know what to do, it's actually quite an easy task.