How would I update table data in HTML from my Ajax call json response?

Question

I initially display a table which has data sent from my controller.

I then make an ajax call which returns json data to update the table every minute with the new data. Currently it only updates the first row, with the last item in the json array returned by the ajax call.

I tried unique ID's for the table row but that did not work so I am confused

Here is my Code :

<script type="text/javascript">
        var update_data = function() {
            var data = {};
            $.ajax({
                url: '/Update',
                dataType: 'json',
                async: false,
                success: function(data) {
                    console.log('success' + data.date );
                    for(var i=0; i<data.ticker.length;i++){
                        $("#ticker").html("<a href='/ticker?ticker="+data.ticker[i].ticker+"'>"+data.ticker[i].ticker+"</a>");
                        $("#totalCount").html(data.ticker[i].total_count);
                        $("#positiveCount").html(data.ticker[i].positive_count);
                        $("#negativeCount").html(data.ticker[i].negative_count);
                        $("#neutralCount").html(data.ticker[i].neutral_count);
                        $("#avgTotalCount").html(data.ticker[i].avg_total);
                        $("#avgPositiveCount").html(data.ticker[i].avg_positive);
                        $("#avgNegativeCount").html(data.ticker[i].avg_negative);
                        $("#avgNeutralCount").html(data.ticker[i].avg_neutral);

                    }
                },
                error: function(data) {
                    console.log('failure' + msg );
                    //need to traverse to success and if false, do something
                }
            });

            //your jQuery ajax code
        };

        var interval = 1000 * 60 * .1; // where X is your every X minutes

        setInterval(update_data, interval);
        update_data();
    </script>
    <table class="table table-striped sortable" style="width: 60%; float:left;">
        <td class="active countBoxHourTitle">Ticker</td>
        <td class="active countBoxTitle">Total</td>
        <td class="active countBoxTitle">Positive</td>
        <td class="active countBoxTitle">Negative</td>
        <td class="active countBoxTitle">Neutral</td>
        <td class="active countBoxTitle">Avg. Total</td>
        <td class="active countBoxTitle">Avg. Positive</td>
        <td class="active countBoxTitle">Avg. Negative</td>
        <td class="active countBoxTitle">Avg. Neutral</td>
        <%var i=0%>
        <% _.each(ticker, function (Tickerboard){ %>
        <tr>
        <%
            var total_change = Math.round(((ticker[i].total_count - ticker[i].yes_total)/ticker[i].yes_total)*100)
            var pos_change = Math.round(((ticker[i].positive_count - ticker[i].yes_pos)/ticker[i].yes_pos)*100)
            var neg_change = Math.round(((ticker[i].negative_count - ticker[i].yes_neg)/ticker[i].yes_neg)*100)
            var neut_change = Math.round(((ticker[i].neutral_count - ticker[i].yes_neut)/ticker[i].yes_neut)*100)
        %>
            <td class="active countBoxHour" id="ticker"><a href="/ticker?ticker=<%=ticker[i].ticker%>"><%=ticker[i].ticker%></a></td>
            <td class="success countBox" id="totalCount"><%=ticker[i].total_count%> (<%=total_change%>%)</td>
            <td class="success countBox" id="positiveCount"><%=ticker[i].positive_count%> (<%=pos_change%>%)</td>
            <td class="danger countBox" id="negativeCount"><%=ticker[i].negative_count%> (<%=neg_change%>%)</td>
            <td class="success countBox" id="neutralCount"><%=ticker[i].neutral_count%> (<%=neut_change%>%)</td>
            <td class="success countBox" id="avgTotalCount"><%=ticker[i].avg_total%></td>
            <td class="success countBox" id="avgPositiveCount"><%=ticker[i].avg_positive%></td>
            <td class="danger countBox" id="avgNegativeCount"><%=ticker[i].avg_negative%></td>
            <td class="success countBox" id="avgNeutralCount"><%=ticker[i].avg_neutral%></td>
        </tr>
        <%i++%>
        <%})%>

    </table>

How can i do this ?

Answer 1

Only the last entry is going to be shown, because html() overwrites whatever content was in there. You need to do something more like $("#totalCount").html(data.ticker[i].total_count + $("#totalCount").html()); to append the old HTML at the end.

EDIT: Even better to use dreamweiver's suggestion: $("#totalCount").append(data.ticker[i].total_count);

Answer 2

You need to use class in place of id as id must be unique like,

<td class="active countBoxHour ticker">...</td>
<td class="success countBox totalCount">...</td>
<td class="success countBox positiveCount">...</td>
<td class="danger countBox negativeCount">...</td>
<td class="success countBox neutralCount">...</td>
<td class="success countBox avgTotalCount">...</td>
<td class="success countBox avgPositiveCount">...</td>
<td class="danger countBox avgNegativeCount">...</td>
<td class="success countBox avgNeutralCount">...</td>

And change your loop like,

for(var i=0,len=data.ticker.length; i<len;i++){
    $(".ticker:eq("+i+")").html("<a href='/ticker?ticker="+data.ticker[i].ticker+"'>"+data.ticker[i].ticker+"</a>");
    $(".totalCount:eq("+i+")").html(data.ticker[i].total_count);
    $(".positiveCount:eq("+i+")").html(data.ticker[i].positive_count);
    $(".negativeCount:eq("+i+")").html(data.ticker[i].negative_count);
    $(".neutralCount:eq("+i+")").html(data.ticker[i].neutral_count);
    $(".avgTotalCount:eq("+i+")").html(data.ticker[i].avg_total);
    $(".avgPositiveCount:eq("+i+")").html(data.ticker[i].avg_positive);
    $(".avgNegativeCount:eq("+i+")").html(data.ticker[i].avg_negative);
    $(".avgNeutralCount:eq("+i+")").html(data.ticker[i].avg_neutral);
}