up vote 4 down vote favorite

I am new to XML and AJAX and am only a newcomer to Javascript and jQuery. Among other job duties I design our website. A deadline is very near, and the only way I can think of to do this project well is with AJAX. I have a document full of XML objects such as this one repeating:

<item>
    <subject></subject>
    <date></date>
    <thumb></thumb>
</item>

I want to create an array of all elements and their child elements. I've been reading jQuery tutorials on AJAX for hours and don't even know where to start because they all assume a certain level of javascript proficiency. If someone could show me the easiest way to loop through all elements and put their children into an array, I'd appreciate it tons.

share|improve this question
Please describe the desired structure of the resulting array. – Dr.Molle Jul 1 '11 at 0:01
XML is hierarchical in nature, arrays are linear. How do you plan on addressing that issue? (before you decide on how to do something, you better clarify what you are trying to do) – Steve Wellens Jul 1 '11 at 0:47
I don't know how I will address the issue. I have an XML file full of news items that will be read and converted to html and displayed on a front page. What I want ideally is for each <item> to become a javascript object in an object array. Is this sort of array impossible with javascript? – penco Jul 2 '11 at 16:09

3 Answers

up vote 5 down vote accepted

Using jQuery, $.ajax() your XML file, and on success pass retrieved data with each, like: 

 var tmpSubject, tmpDate, tmpThumb;
 $.ajax({
            url: '/your_file.xml',
            type: 'GET', 
            dataType: 'xml',
            success: function(returnedXMLResponse){
                $('item', returnedXMLResponse).each(function(){
                     tmpSubject = $('subject', this).text();
                     tmpDate = $('date', this).text();
                     tmpThumb = $('thumb', this).text();
                    //Here you can do anything you want with those temporary
                    //variables, e.g. put them in some place in your html document
                    //or store them in an associative array
                })
            }  
        });
share|improve this answer
Thanks! Have not got to test yet, but it makes sense. If I have a large XML document and don't necessarily want all the XML data each time I call it, will using the .ajax() function result in better performance than the .parseXML() function? – penco Jul 1 '11 at 21:45
up vote 2 down vote

If you are using jQuery then parseXML will suck an entire xml doc into a usable data structure.

share|improve this answer
up vote 2 down vote

I wrote this.. pretty simple way to take a welformed XML response/string and parse it with jquery and then convert to array.

var response = '<?xml version="1.0" encoding="UTF-8"?><root><node1>something</node1></root>  

var xmlDoc = $.parseXML( response );

var myArray = getXMLToArray(xmlDoc);

alert(myArray['root']['node1']);
//Pop up window displaying the text "something"

function getXMLToArray(xmlDoc){
    var thisArray = new Array();
    //Check XML doc
    if($(xmlDoc).children().length > 0){
    //Foreach Node found
    $(xmlDoc).children().each(function(){    
        if($(xmlDoc).find(this.nodeName).children().length > 0){
        //If it has children recursively get the inner array
        var NextNode = $(xmlDoc).find(this.nodeName);
        thisArray[this.nodeName] = getXMLToArray(NextNode);
        } else {
        //If not then store the next value to the current array
        thisArray[this.nodeName] = $(xmlDoc).find(this.nodeName).text();
        }
    });
    }
    return thisArray;
}

Hope this helps!!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.