在XML文档中搜索特定元素/属性值并返回该元素

时间:2014-01-24 10:59:06

标签: javascript xml search xmlhttprequest

所以我得到了这个代码,它从XML(产品目录)中获取元素并将它们列在表中。我现在要做的是从XML只返回1个产品及其所有元素。例如,我想从目录中只获得我想看到的具有某种SERIAL的产品。

这是我的XML文档:

<CATALOG>
    <PRODUCT>
       <SERIAL>123ABC</SERIAL>
       <PRODNR>1234</PRODNR>
       <PRODNM>COOLER</PRODNM>
       <ACCNAME>JOHN</ACCNAME>
       <NRDOC>0001</NRDOC>
    </PRODUCT>
    <PRODUCT>
       <SERIAL>234BCD</SERIAL>
       <PRODNR>2345</PRODNR>
       <PRODNM>MOUSEPAD</PRODNM>
       <ACCNAME>STEVE</ACCNAME>
       <NRDOC>0002</NRDOC>
    </PRODUCT>
    <PRODUCT>
       <SERIAL>345CDE</SERIAL>
       <PRODNR>3456</PRODNR>
       <PRODNM>KEYBOARD</PRODNM>
       <ACCNAME>WILLIAM</ACCNAME>
       <NRDOC>0003</NRDOC>
    </PRODUCT>
    <PRODUCT>
       <SERIAL>456DEF</SERIAL>
       <PRODNR>4567</PRODNR>
       <PRODNM>MOUSE</PRODNM>
       <ACCNAME>MARCUS</ACCNAME>
       <NRDOC>0004</NRDOC>
    </PRODUCT>
</CATALOG>

这是我到目前为止的代码:

function loadXMLDoc(url) {
var serialNumber = document.getElementById('searchBox').value;
var xmlhttp;
var txt, xx, x, i;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        txt = "<table border='1'><tr><th>Product number</th><th>Product name</th><th>Account name</th><th>Document number</th></tr>";
        x = xmlhttp.responseXML.documentElement.getElementsByTagName("PRODUCT");
        for (i = 0; i < x.length; i++) {
            txt = txt + "<tr>";
            xx = x[i].getElementsByTagName("PRODNM");
            {
                try {
                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                }
                catch (er) {
                    txt = txt + "<td>&nbsp;</td>";
                }
            }
            xx = x[i].getElementsByTagName("PRODNR");
            {
                try {
                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                }
                catch (er) {
                    txt = txt + "<td>&nbsp;</td>";
                }
            }
            xx = x[i].getElementsByTagName("ACCNAME");
            {
                try {
                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                }
                catch (er) {
                    txt = txt + "<td>&nbsp;</td>";
                }
            }
            xx = x[i].getElementsByTagName("NRDOC");
            {
                try {
                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                }
                catch (er) {
                    txt = txt + "<td>&nbsp;</td>";
                }
            }
            txt = txt + "</tr>";
        }
        txt = txt + "</table>";
        document.getElementById('showTable').innerHTML = txt;
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

}

1 个答案:

答案 0 :(得分:0)

我会使用XPath来选择必要的PRODUCT节点:

var path = '//SERIAL[text()="' + serialNumber + '"]/..';
var x = document.evaluate(path, xmlhttp.responseXML.documentElement, null, 9, null).singleNodeValue;

注意:( IE的document.selectNodes(xpath)

演示:http://plnkr.co/edit/9hp6kM5OT8LEYrTCrCqN?p=preview

或者您可以简单地遍历所有PRODUCT节点并过滤带有搜索ID的节点。