Get XML into JavaScript Array, then get the values and write them

Question

I've been looking around for a while and have found things close to but not what I'm looking for.

I'm try to take this XML:

<?xml version="1.0"?>
<document name="New Document">
    <url>http://nsc-component.webs.com/Office/Editor/new-doc.html?docname=New+Document&titletype=Title&fontsize=9&fontface=Arial&spacing=1.0&text=&wordcount3=0</url>
</document>

I know it's not valid, it's just an example

And make it into a JavaScript array that writes it like so:

<a href="URL-TAG-VALUE">NAME ATTRIBUTE HERE</a>

For each <document> tag

Can anyone help?

adeneo · Accepted Answer · 2013-05-21 21:56:40Z

1

You should probably parse the XML string before working with it :

if (window.DOMParser) {
    var parser = new DOMParser(),
    xml = parser.parseFromString(your_xml_string_here,"text/xml");
} else { // Internet Explorer
    var xml = new ActiveXObject("Microsoft.XMLDOM");

    xml.async = false;
    xml.loadXML(your_xml_string_here); 
}

Then you can access the DOM of the XML like you would HTML:

var arr = [],
    documents = xml.getElementsByTagName('document');

for (var i = 0; i < documents.length; i++) {
    var anchor = document.createElement('a'),
        url    = documents[i].getElementsByTagName('url')[0];


    anchor.href = url.innerText || url.textContent;
    anchor.innerHTML = documents[i].getAttribute('name');

    arr.push(anchor);
}

Your XML as it's shown in the question is not valid, and will however fail the parsing.

FIDDLE

edited May 21, 2013 at 21:56

answered May 21, 2013 at 21:35

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

electrikmilk Over a year ago

That's awesome! But would it work for every <document> tag that was in the XML?

adeneo Over a year ago

@brandonjordan - Yes it would, see this FIDDLE

electrikmilk Over a year ago

Wow that's awesome! Thanks so much! I know I've asked for a lot so far but is there anyway I can put that into a <div>, add an <img/> before it, some  's? If not can I at least add a class so I can style it?

adeneo Over a year ago

@brandonjordan - you can add anything you want, and build whatever HTML suits your needs. Here's another FIDDLE

hexacyanide · Accepted Answer · 2013-05-21 23:34:49Z

1

Although your XML isn't valid, and jQuery is not a solution for everything, it does have a nice function called jQuery.parseXML(). Here's a possible solution:

//assign the XML string to a variable
var xmlstring = '<?xml version="1.0"?><document name="New Document"><url>http://stackoverflow.com</url></document>';

//use jQuery's XML parsing function and assign it to a variable
var xmldoc = $.parseXML(xmlstring);

//allow jQuery to handle the elements like HTML
var xml = $(xmldoc);

//find <url> and get its contents
var url = xml.find('url').text();

//find <document> and get its name attribute
var doc = xml.find('document').attr('name');

In this example, url will return http://stackoverflow.com and doc will return New Document.

edited May 21, 2013 at 23:34

answered May 21, 2013 at 21:35

hexacyanide

92.4k31 gold badges168 silver badges162 bronze badges

3 Comments

nullability Over a year ago

Using jQuery will avoid some cross-browser issues with parsing XML.

electrikmilk Over a year ago

Ok, thanks for the suggestion, I'll try that once I have some time to edit my code

electrikmilk Over a year ago

any chance you could make an example on jsfiddle? et cetera? pardon. I'm not too fluent in jQuery.

Collectives™ on Stack Overflow

Get XML into JavaScript Array, then get the values and write them

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related