使用jQuery将XML解析为表

Question

I am using YQL to pull in a remote XML feed, I have this working in all other areas, but cannot get it to parse the data and format into a table. Here is my fiddle . The xml looks like this:

<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>

I have the following HTML mark up:

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

Attempting to parse the xml like this:

$(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

It seems you want to loop over each Ticker in the xml and add a row for each one with the relevant values:

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/