javascript - 在 jquery 中循环嵌套 xml

Question

我从服务器获取的 XML 看起来像这样 - 我无法更改它的输出方式:

<response>
    <Returns>
        <Return warehouseID="123">
            <Status>FOUND</Status>
            <Name>Bob Dobbs</Name>
            <Items>
                <Item id="111" SKU="a12">
                    <QtyReturned>1</QtyReturned>
                </Item>
                <Item id="222" SKU="a23">
                    <QtyReturned>2</QtyReturned>
                </Item>
            </Items>
        </Return>
        <Return warehouseID="456">
            <Status>LOST</Status>
            <Name>Rusty Shackleford</Name>
            <Items>
                <Item id="333" SKU="b34">
                    <QtyReturned>3</QtyReturned>
                </Item>
                <Item id="444" SKU="b45">
                    <QtyReturned>1</QtyReturned>
                </Item>
            </Items>
        </Return>
    </Returns>
</response>

我可以很容易地获得第一级数据，但我似乎无法在 Jquery 中正确输出项目。这是我当前工作的 ajax 片段:

$.ajax({
    type: 'GET',
    url: 'data.xml',
    dataType: 'xml',
    success: function(data) {

        var entries     = $(data).find('Return'),
        xmlOutput      = [];

        entries.each(function() {

            var warehouseid         = $(this).find('warehouseID ').text(),
                name                = $(this).attr('Name'),
                status      = $(this).attr('Status');

                xmlOutput += '<div class="returnblock">';
                xmlOutput += '<div> Return wareshouse ID: '+ warehouseid + '</div>';
                xmlOutput += '<div>'+ name + ' | ' + status + '</div>';
                //Items go here?
                xmlOutput += '</div>';

            });                 
    } 
}); 

一切正常，除了我无法弄清楚如何循环项目并让数据正确输出。我正在尝试输出:

<div class="returnblock">
    <div> Return warehouse ID: 123</div>
    <div> Bob Dobbs | FOUND </div>
    <div> Item id:111 | SKU:a12 | Returned:1</div>
    <div> Item id:222 | SKU:a23 | Returned:2</div>
</div>
<div class="returnblock">
    <div> Return warehouse ID: 456</div>
    <div> Rusty Shackleford | LOST </div>
    <div> Item id:333 | SKU:b34 | Returned:3</div>
    <div> Item id:444 | SKU:b45 | Returned:1</div>
</div>

Answer 1

为了获得元素，您可以:

items = $(this).find('Item');

因此在 each 元素上循环:

var dataStr = '<response>\
            <Returns>\
            <Return warehouseID="123">\
            <Status>FOUND</Status>\
            <Name>Bob Dobbs</Name>\
    <Items>\
    <Item id="111" SKU="a12">\
            <QtyReturned>1</QtyReturned>\
            </Item>\
            <Item id="222" SKU="a23">\
            <QtyReturned>2</QtyReturned>\
            </Item>\
            </Items>\
            </Return>\
            <Return warehouseID="456">\
            <Status>LOST</Status>\
            <Name>Rusty Shackleford</Name>\
    <Items>\
    <Item id="333" SKU="b34">\
            <QtyReturned>3</QtyReturned>\
            </Item>\
            <Item id="444" SKU="b45">\
            <QtyReturned>1</QtyReturned>\
            </Item>\
            </Items>\
            </Return>\
            </Returns>\
            </response>';
    var data = $.parseXML(dataStr);
    /*
    $.ajax({
        type: 'GET',
        url: '1.xml',
        dataType: 'xml',
        success: function (data) {  */
            var entries = $(data).find('Return'),
                    xmlOutput = [];
            entries.each(function () {
                var warehouseid = this.getAttribute('warehouseID'),
                        name = $(this).find('Name'),
                        status = $(this).find('Status'),
                        items = $(this).find('Item');
                xmlOutput += '<div class="returnblock">\n\t';
                xmlOutput += '<div> Return wareshouse ID: ' + warehouseid + '</div>\n\t';
                xmlOutput += '<div>' + name.text() + ' | ' + status.text() + '</div>\n';
                // items.....
                items.each(function (idx, ele) {
                    xmlOutput += '\t<div> Item id: ' + ele.getAttribute('id') +
                            ' | SKU:' + ele.getAttribute('SKU') + ' | Returned: ' + ele.textContent.trim() + '</div>\n';
                });
                xmlOutput += '</div>\n';
            });
            console.log(xmlOutput);

        //}
    //});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>