returning xml string - how to parse xml file using JQuery/Json

Question

when i do alert it returning string like this:

data    "<?xml version="1.0" encoding="utf-8" ?> 
      <xml xmlns="http://www.opengis.net/kml/2.2">
      <Document>
      <Name>John Smith</Name> 
      <Description>stackoverflow</Description> 
      <Total>50</Total> 
      </Document>
      </xml>"

Update: i tried using this method getJSON and i do get alerts but never execute inside the find('Document').each.....

 $.getJSON(_url, function (data) {

            alert(data);    
            $(data).find('Document').each(function () {
                debugger
                var name = $(this).find('Name');
                var desc = $(this).find('Description').text();
                var total = $(this).find('Total').text()

            });

        });

how to read xml file in jquery, below is what is returning me as a string and i can see that when i do alert(data);

 $.getJSON(url, {},
                function (data) {
                    alert(data);
             }
});


<?xml version="1.0" encoding="utf-8" ?> 
- <xml xmlns="http://www.opengis.net/kml/2.2">
- <Document>
  <Name>John Smith</Name> 
  <Description>stackoverflow</Description> 
  <Total>50</Total> 
  </Document>
  </xml>

What are you trying to get out? Also, that's *definitely* not JSON :) — Nick Craver, Nov 30 '10 at 22:10
Nick: my url is calling a cross domain call and thats why i am using getJSON method and i have updated my question please have a look at it. — Nick Kahn, Dec 01 '10 at 01:19

score 5 · Answer 1 · edited May 23 '17 at 12:32

5

If you're still looking for an answer, Google's ajax API has a built in xml->json converter.

You can call it via http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q= with your request url at the end.

If youre trying to use JSONP and get around same origin concerns, it would look something like this:

var googleAPI = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=";

$.getJSON(googleAPI + url + "&callback=?", null, function(data) {

        alert(data);    
        $(data).find('Document').each(function () {
            debugger
            var name = $(this).find('Name');
            var desc = $(this).find('Description').text();
            var total = $(this).find('Total').text()

        });
});

However, this will give you JSON data, so youre going to need to modify your callback to serialize it and access the Name, Description, Total elements as attributes. If you need direction on this, checkout Serializing to JSON in jQuery

edited May 23 '17 at 12:32

Community

1
1

answered May 06 '13 at 00:59

ginman

1,315
10
20

what do we replace 'Document' with to make the each statement actually find the data? thanks. – klewis Aug 15 '13 at 14:36
Its the parent node (property once serialized) shown in the question above. data at this point is just your JSON. If you want to access the data directly, your best bet is to serialize it, see the link in my answer above. – ginman Aug 27 '13 at 18:11
Thank you @ginman, I figured it out! I'm loving how this API allows us to call external data from other servers, and also manipulate that same data via jQuery. – klewis Aug 27 '13 at 21:44
Yeah, actually by specifying &callback=?, we are requesting JSONP, thats how it gets around the same origin concerns. I just realized that a few days ago. – ginman Sep 03 '13 at 19:11

score 1 · Accepted Answer · edited Jul 22 '13 at 08:51

You appear to have misunderstood what JSON is, and how it is used in jQuery!?

If you want to do cross-domain, the returned data must be in JSON format. jQuery will attempt to parse your JSON as soon as it receives it. It expects it in a format like "jsonp1291171891383({})" which is then evaluated as JavaScript. The XML you have returned in not JavaScript.

One possible way to work around this is your return data is something like "jsonp1({"data":"<xml>"})". If that is the case, then in your example the variable "data" is plain text, and you will need to parse the XML before you can access it via selector methods.

From here.

jQuery.fromXMLString = function(strXML){
    if (window.DOMParser) {
        return jQuery(new DOMParser().parseFromString(strXML, "text/xml"));
    } else if (window.ActiveXObject) {
        var doc = new ActiveXObject("Microsoft.XMLDOM");
        doc.async = "false";
        doc.loadXML(strXML);
        return jQuery(doc);
    } else {
        return jQuery(strXML);
    }
};

And then in your code:

 $.fromXMLString(data).find('Document').each( ... );

score 0 · Answer 3 · answered Nov 30 '10 at 22:14

0

You should not be using .getJSON for XML data. Instead, try this:

$.ajax({
    url: url,
    data: {},
    success: function(data){
        // now you can traverse your data just like the DOM
        // e.g. 
        // alert( $(data).find('Document:first Name').text() );
    },
    dataType: 'xml'
});

answered Nov 30 '10 at 22:14

Nick G

960
6
7

i am using jsonp and its cross domain reference and thats why i am using getJson, i try to your code and but it does not alert me not give me any error.... – Nick Kahn Dec 01 '10 at 00:47
when i do `alert( $(data).find('Document:first Name').text() ); ` i dont get any value, its blank – Nick Kahn Dec 01 '10 at 00:51
if i use `$.ajax` i get `access denied error` as i have said i am using cross domain call – Nick Kahn Dec 01 '10 at 01:00

score 0 · Answer 4 · answered Nov 30 '10 at 22:33

0

Others have said that you should not be using JSON, and they are correct, but I think what you really need to know is that XML can be navigated just like HTML using jQuery. You can use selectors like $('Name') to get at your <Name> data and so on. So once you have your data returned, you can do something like this:

var people = data.children('Name');

answered Nov 30 '10 at 22:33

idrumgood

4,904
19
29

i get an error `Microsoft JScript runtime error: Object doesn't support this property or method` when i try to `alert(data.children('Name'))` – Nick Kahn Dec 01 '10 at 00:50

returning xml string - how to parse xml file using JQuery/Json

4 Answers4