jQuery获取嵌套XML列表并将其发布为

Question

我试图从xml列表中获取项目，并将其打印为html页面。有个小问题。您可以在这里看到问题：api/。

应该有2行，我不知道为什么有6行。我打印sku，描述，价格和图像url。正如你所看到的，变体有相同的图像url，不同的价格，不同的描述和不同的sku。

<?xml version='1.0' encoding='utf-8'?>
<response>
    <objects type="list">
        <object type="hash">

            <imageURL>
                http://5387f51cd2471f8fea9a-807406182e5fe44c6ce394326aa32939.r89.cf2.rackcdn.com/image/189589cd5409c29b9efa1281d66b41bba0c101d6.jpg
            </imageURL>

            <variants type="list">

                <object type="hash">
                    <sku>IRIS3-1</sku>
                    <dimensions type="list">
                        <object type="hash">
                            <dimension>Dimension</dimension>
                            <value>Irish Spring Bar Soap-1 (3 x 3.75 Oz) x 18</value>
                        </object>
                    </dimensions>
                    <unitPrice>31.00</unitPrice>
                </object>

                <object type="hash">
                    <sku>IRIS3-2</sku>
                    <dimensions type="list">
                        <object type="hash">
                            <dimension>Dimension</dimension>
                            <value>Irish Spring Bar Soap-2 (3 x 3.75 Oz) x 18</value>
                        </object>
                    </dimensions>
                    <unitPrice>32.00</unitPrice>
                </object>

            </variants> 
        </object>
    </objects>
</response>

XML列表

$(document).ready(function(){ 

    $.get("items2.xml",{},function(xml){    
        // Build an HTML string
        myHTMLOutput = '';
        myHTMLOutput += '<table width="100%" border="1" cellpadding="0" cellspacing="0">';
        myHTMLOutput += '<th>SKU</th><th>Description</th><th>Price</th><th>Image</th>';
        var mydata = " "; 
        var imageURL = " ";
        var sku = " ";
        var name = " ";
        var unitPrice = " ";


        $('objects object',xml).each(function(i) {
            imageURL = $(this).find("imageURL").text();
            //var sku;
            //var name;
            //var unitPrice;
            $(this).find('variants object').each(function(){

                sku = $(this).find("sku").text();
                name = $(this).find('dimensions object value').text();
                unitPrice = $(this).find("unitPrice").text();
                //console.log(unitPrice);
                mydata = BuildStudentHTML(sku,name, unitPrice,imageURL);
                myHTMLOutput = myHTMLOutput + mydata;
            });


            // Build row HTML data and store in string

        });
        myHTMLOutput += '</table>';

        // Update the DIV called Content Area with the HTML string
        $("#ContentArea").append(myHTMLOutput);
    });
});

function BuildStudentHTML(sku, name, unitPrice, imageURL){
   output = '';
   output += '<tr>';
   output += '<td>'+ sku + '</td>';
   output += '<td>'+ name +'</td>';
   output += '<td>'+ unitPrice +'</td>';
   output += '<td>'+ imageURL +'</td>';
   output += '</tr>';
   return output;
}

Answer 1

在循环同名嵌套节点时，尝试使用直接子选择器>：$('objects > object')。这将选择object节点，这些节点是objects的直接子节点。

$('objects object')将选择属于objects的子节点和variants节点的嵌套子节点的object节点。它基本上是“在objects嵌套或其他情况下给我所有的objects节点”。

如果没有一个有效的jsFiddle示例，就很难调试它，所以如果它不能工作，请不要否决我。