使用jQuery將XML解析為表

Question

我正在使用YQL來引入遠程XML提要，我在其他所有領域都有這個工作，但無法將其解析為數據並將其格式化為表格。 這是我的小提琴 。 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 ，並為每個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/