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>

Solution 1

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( ... );

Solution 2

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