对 XML 元素进行分组并使用 javascript 显示答案

【问题标题】：grouping XML elements and displaying using javascript对 XML 元素进行分组并使用 javascript 显示
【发布时间】：2011-06-25 18:40:38
【问题描述】：

我有一个 XML，我需要使用 javascript 对其元素进行分组和显示。如何解析 xml，以便最终输出是不同元素的计数。即

XML 字符串

 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

  201112345 (1)
  201167890 (1)

任何帮助将不胜感激，

谢谢你了

【问题讨论】：

标签： javascript jquery asp.net xml

【解决方案1】：

您正在使用 jQuery，因此您可以使用它来轻松访问 XML 的 DOM。

只需以通常的方式为您的 XML 实例化一个 jQuery 包装器：

var $xml = $(txt);

然后，find 所有的<FileDateTime> 子级并将它们的内容汇总到一个对象中：

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];
});

然后您的摘要数据位于summary。

现场示例：http://jsfiddle.net/ambiguous/gKgyr/

更新：基于this question about XML parsing in IE，我认为使用$.parseXML 将有助于IE：

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

虽然我现在无法检查，但这里有一个现场版本：http://jsfiddle.net/ambiguous/gKgyr/12/

【讨论】：

thanks 就像 chrome 和 firefox 中的魅力一样...但是 IE 没有显示任何内容...有解决方法吗？...谢谢，这是很大的帮助。
@Bhat：看看over here，听起来就像你遇到的IE问题。也许在 IE 中尝试this version of the fiddle。

【解决方案2】：

编辑：不适用于 Internet Explorer。稍后会添加对它的支持。

一个没有 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;

编辑：在 Internet Explorer 支持下，它变得一团糟。如果可能，我会使用 jQuery。

// 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;

【讨论】：