XML data into a single variable using JQuery

Question

Imagine you have a data.xml file:

<?xml version="1.0" encoding="UTF-8" ?>
<root>
    <item>value1</item>
    <item>value2</item>
    <item>value3</item>
</root>

I'm trying to store all the data config into a single variable in order to use it in my .js code using this:

$(document).ready(function() {
        'use strict';
        jQuery.extend({
            getValues: function(url) {
            var result = null;
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'xml',
                async: false,
                success: function(data) {
                result = data;
                }
            });
               return result;
            }
        });

        results = $.getValues("data.xml");
        console.log(results);
});

If I refresh the page I get in results variable a Document object with fields like URL, baseURI, body ...

If I refresh again I get in results a #document object with the data from the data.xml:

<root>
    <item>value1</item>
    <item>value2</item>
    <item>value3</item>
</root>

So the type of object returned changes each time someone goes to the url.

I have two questions about this:

How can I make the returned value always #document? (which contains the data from the .xml file)
How can I access to an element from #document?

I have tried using:

console.log(results.root.item);
console.log(results.find("item"));

But both give me errors.

Maybe there is a better way to do this (meaning reading xml data into a single variable).

Any suggestions?

Andy · Accepted Answer · 2012-06-01 12:18:58Z

1

You are returning the result before the ajax request has finished. You have to wait for the ajax to return, then call a callback function:

$(document).ready(function() {
        'use strict';
        jQuery.extend({
            getValues: function(url, callback) {
            var result = null;
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'xml',
                async: false,
                success: function(data) {
                    callback.call(this, data);
                }
            });
            }
        });

        $.getValues("data.xml",function(data){
             console.log(data);
        });

});

answered Jun 1, 2012 at 12:18

Andy

30.2k9 gold badges43 silver badges59 bronze badges

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

2 Comments

rfc1484 Over a year ago

You are right, but in order to make it work I had to delete the "async" property. Now I only need to know how to access an element from the data variable.

Andy Over a year ago

@rfc1484 oh i missed the async option. since your data is xml you can use regular jquery to access elements: var xml = $(data); then for example xml.find('someelement').attr('someattribute');

Ram · Accepted Answer · 2012-06-01 12:15:43Z

0

you can select xml tags in this way:

success: function(data) {
    parser(data);
}

function parser(data) {
 ...
}

edited Jun 1, 2012 at 12:15

answered Jun 1, 2012 at 11:42

Ram

145k16 gold badges174 silver badges201 bronze badges

2 Comments

rfc1484 Over a year ago

But I want to select the xml tags outside the ajax success function, once the xml has been returned.

Ram Over a year ago

@rfc1484 you can create a function and pass the ajax data to it.

Collectives™ on Stack Overflow

XML data into a single variable using JQuery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related