javascript - 使用 jQuery 将 XML 解析为表

Question

我正在使用 YQL 获取远程 XML 提要，我在所有其他领域都可以使用它，但无法让它解析数据并将格式转换为表格。这是我的 fiddle 。 xml 看起来像这样:

<string xmlns="http://tempuri.org/">
    <?xml version="1.0" encoding="utf-16"?> 
    <BTCE>
        <TickerList />
            <Ticker> 
                <Average Value="" /> 
                <BuyPrice Value="443.95" /> 
                <Currency Value="USD" /> 
                <High Value="456.96" /> 
                <Low Value="424.00" /> 
                <SellPrice Value="444.27" /> 
                <Volume Value="18754.79784877" /> 
                <LastPrice Value="443.95" /> 
                <Time Value="04/28/2014 15:56:54" /> 
            </Ticker> 
            <Ticker> 
                <Average Value="" /> 
                <BuyPrice Value="444.32" /> 
                <Currency Value="USD" /> 
                <High Value="456.96" /> 
                <Low Value="424.00" /> 
                <SellPrice Value="444.70" /> 
                <Volume Value="18762.65028563" /> 
                <LastPrice Value="443.96" /> 
                <Time Value="04/28/2014 15:57:57" /> 
            </Ticker> 
            <Ticker> 
                <Average Value="" /> 
                <BuyPrice Value="444.32" /> 
                <Currency Value="USD" /> 
                <High Value="456.96" /> 
                <Low Value="424.00" /> 
                <SellPrice Value="445.00" /> 
                <Volume Value="18758.16227820" /> 
                <LastPrice Value="444.32" /> 
                <Time Value="04/28/2014 15:58:08" />
            </Ticker> 
        </BTCE>

我有以下 HTML 标记:

<table class="fluid" id="BuyOrders">
    <tr>
        <th>Price per/ BTC</th>
        <th>Quantity, ฿</th>
        <th>Total, $</th>
    </tr>
</table>

尝试像这样解析 xml:

$(function () {
    site = 'http://ec2-54-201-216-39.us-west-2.compute.amazonaws.com/testc/WebService.asmx/GetTicker';
    var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + site + '"') + '&format=xml&callback=?';
    function loadTable() {
        $.getJSON(yql, function (data) {
            var xml = $.parseXML(data.results[0]),
            xmlDoc = $.parseXML($(xml).find("string").text()),
            $xml = $(xmlDoc),
            $buyPrice = $xml.find("BuyPrice");
            $volume = $xml.find("volume");
            $sellPrice = $xml.find("SellPrice");
            var tr;
            for (var i = 0; i < xml.length; i++){
            tr = $('<tr/>');
                tr.append('<td>' + $buyPrice.attr("Value") + '</td>');
            $('#BuyOrders').append(tr);
        }
    });
    }
  loadTable();
});

Answer 1

似乎您想遍历 xml 中的每个 Ticker 并为每个具有相关值的行添加一行:

function loadTable() {
    $.getJSON(yql, function (data) {
        var xml = $.parseXML(data.results[0]),
        xmlDoc = $.parseXML($(xml).find("string").text()),
        $xml = $(xmlDoc);


        $xml.find("Ticker").each(function(){
            var buyPrice = $(this).find("BuyPrice").attr("Value");

            var tr = $("<tr/>");
            tr.append("<td>" + buyPrice + "</td>");
            /* ... any other tds here with various field values ... */
            $("#BuyOrders").append(tr);
        });
    });
}

http://jsfiddle.net/3k7Tb/8/