Parsing XML to table with jQuery

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();
});

No prob. I am tring to figure out how to run an .each function on the parse xml to find each instance of <Ticker> and parse its children and append them to a row. No joy. — Dirty Bird Design
– Dirty Bird Design, Commented Apr 28, 2014 at 20:47
I found the issue - there is only one record in the XML that we are trying to retrieve in the fiddle, not multiples as you have shown in your sample above. jsfiddle.net/jayblanchard/3k7Tb/5 — Jay Blanchard
– Jay Blanchard, Commented Apr 28, 2014 at 21:05
Happens to all of us - I didn't think to check the return until a few moments ago. — Jay Blanchard
– Jay Blanchard, Commented Apr 28, 2014 at 21:17

James Montagne · Accepted Answer · 2014-04-28 21:11:21Z

3

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/

edited Apr 28, 2014 at 21:11

answered Apr 28, 2014 at 21:03

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dirty Bird Design Over a year ago

I updated my fiddle with the correct service, jsfiddle.net/3k7Tb/6 now returning multiple <Ticker>

James Montagne Over a year ago

@DirtyBirdDesign That doesn't change the code. This code works with multiple: jsfiddle.net/3k7Tb/8

Dirty Bird Design Over a year ago

With the correct service and your example it works Thank you to you and @Jay Blanchard

Collectives™ on Stack Overflow

Parsing XML to table with jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related