分组XML元素并使用javascript显示

Question

I have an XML whose elements i need to group and display using javascript. How can I parse the xml so that the final output would be the count of the distinct elements. ie

The XMlstring

 txt = txt + "<FileList>";
            txt = txt + "<File>";
            txt = txt + "<FileID>1234</FileID>";
            txt = txt + "<FileType>image</FileType>";
            txt = txt + "<FileDateTime>201112345</FileDateTime>";
            txt = txt + "<FileTitle>something1</FileTitle>";
            txt = txt + "<FileSize>123</FileSize>";
            txt = txt + "</File>";
            txt = txt + "<File>";
            txt = txt + "<FileID>1209</FileID>";
            txt = txt + "<FileType>image</FileType>";
            txt = txt + "<FileDateTime>201167890</FileDateTime>";
            txt = txt + "<FileTitle>something1</FileTitle>";
            txt = txt + "<FileSize>123</FileSize>";
            txt = txt + "</File>";
            txt = txt + "</FileList>";

Html I want to display

  201112345 (1)
  201167890 (1)

Any Help would be appreciated,

Thanks, bhat

Answer 1

You're using jQuery so you can use that to give you easy access to your XML's DOM.

Just instantiate a jQuery wrapper for your XML in the usual manner:

var $xml = $(txt);

Then, find all the <FileDateTime> children and summarize their content in an object:

var summary = { };
$xml.find('FileDateTime').each(function() {
    // Get the element's content as text.
    var dt = $.trim($(this).text());

    // And update the summary
    if(!summary.hasOwnProperty(dt))
        summary[dt] = 0;
    ++summary[dt];
});

Then you have your summary data in summary .

Live example: http://jsfiddle.net/ambiguous/gKgyr/

---

UPDATE : Based on this question about XML parsing in IE , I think using $.parseXML will help with IE:

var $xml = $($.parseXML(txt));

I can't check right now though but here's a live version of this one: http://jsfiddle.net/ambiguous/gKgyr/12/

Answer 2

Edit: Does not work with Internet Explorer. Will add support for that in a bit.

A simple, unoptimized implementation without jQuery;

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(txt, "text/xml");
var dates = xmlDoc.evaluate("/FileList/File/FileDateTime/text()", xmlDoc, null, XPathResult.ANY_TYPE, null);

var result,
  map = {},
  summary = "";

while (result = dates.iterateNext()) {
  var date = result.nodeValue.trim();
  map[date] = map[date] ? ++map[date] : 1;
}

for(var key in map)
  summary += key + "&nbsp;(" + map[key] + ")<br />";

document.getElementById("output").innerHTML = summary;

Edit: With Internet Explorer support, it became a mess. I would use jQuery if possible.

// Adding trim support to Internet Explorer ...
if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, ''); 
  }
}

var xpath = "/FileList/File/FileDateTime/text()",
  map = {},
  summary = "";

if (window.DOMParser) {
  var parser=new DOMParser();
  var xmlDoc = parser.parseFromString(txt,"text/xml");
  var dates = xmlDoc.evaluate("/FileList/File/FileDateTime/text()", xmlDoc, null, XPathResult.ANY_TYPE, null);

  var node;
  while (node = dates.iterateNext()) {
    var date = node.nodeValue.trim();
    map[date] = map[date] ? ++map[date] : 1;
  }
} else {
  // Internet Explorer
  var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(txt); 
  var dates = xmlDoc.selectNodes(xpath);

  for (var i = 0; i < dates.length; i++) {
    var date = dates[i].nodeValue.trim();
    map[date] = map[date] ? ++map[date] : 1;
  }
}

for(var key in map)
  summary += key + "&nbsp;(" + map[key] + ")<br />";

document.getElementById("output").innerHTML = summary;