Getting jquery data to populate table column

Question

I am trying to get a javascript stock ticker to work, it is going well but my knowledge of javascript is at a beginner level.

The current code (top example) pulls out live stock data using the google finance API. It checks to see the stock acronym and prints the full company name and has some various styling.

The second part is a attempt to get the data displaying in a table format, the columns work but i cant get the jquery to populate the final column with the live date :(.

I need to create 3 columns; 1 for the stock name eg (HAULOTTE), one for the stock acroynm eg (PIG) and one for the live stock figures. This will ensure each stock data row keeps parallel with the one above and below it.

Attached is the current jsfiddle:

Thanks for any help.

https://jsfiddle.net/oqousaLw/

<div class="haul" data-symbol="PIG" data-title="HAULOTTE"></div>
<div class="ashtead" data-symbol="AHT" data-title="ASHTEAD"></div>
<div class="united" data-symbol="URI" data-title="UNITED RENTALS"></div>
<div class="terex" data-symbol="TEX" data-title="TEREX"></div>
<div class="cat" data-symbol="CAT" data-title="CATERPILLER"></div>
<div class="hees" data-symbol="HEES" data-title="H&E EQUIPMENT"></div>
<div class="pal" data-symbol="PAL" data-title="PALFINGER "></div>
<br>
    <br>
        <b>Replicate above code but in table format. cant get live data to appear</b>
        <br>
            <br>

        <div class="box">
<div class="floatleft2 " style="padding:5px;">
    <div>HAULOTTE</div>
    <div>ASHTEAD</div>
    <div>UNITED RENTALS</div>
    <div>TEREX</div>
</div>
<div class="stockSymbolnew" style="padding:5px;">
      <div><b>PIG</b></div>
      <div><b>AHT</b></div>
      <div><b>URI</b></div>
      <div><b>TEX</b></div>
</div>
<div class="floatleft2" style="padding:5px;">
    <div><i>GET live data</i></div>
      <div><i>GET live data</i></div>
      <div><i>GET live data</i></div>
      <div><i>GET live data</i></div>
</div>
</div>

Thanks for a solution! and sorry for my late response. – user3036451 Jun 02 '15 at 11:24 — user3036451, Jun 02 '15 at 11:24

Sherin Mathew · Answer 1 · 2015-06-03T04:43:11.693

I have updated your jsfiddle to make it work as you expected.

All I did is dynamically populate the values in the divs below.

Provided Ids to the divs so that we can append values.

<div id="title" class="floatleft2 " style="padding:5px;">

</div>
<div id="symbols" class="stockSymbolnew" style="padding:5px;">

</div>
<div id="liveData" class="floatleft2" style="padding:5px;">

</div>

Appended values using jquery as below.

$("#title").append("<div>" + divContainer.data('title') + "</div>");
$("#symbols").append("<div><b>" + stockInfo1.t + "</b></div>");
$("#liveData").append("<div>" + stockChange + "</div>");

Note: The order of the items will vary between requests because the get calls to google finance is asynchronous

Update

I have updated the answer based on your comment.

Please find the updated jsfiddle here. To have the order of records fixed, we should have elements in place and some identifier to set values to the elements. In order to do this, provide ids to div which display live data as below.

<div class="floatleft2" style="padding:5px;">
      <div><i id="liveDataPIG"></i></div>
      <div><i id="liveDataAHT"></i></div>
      <div><i id="liveDataURI"></i></div>
      <div><i id="liveDataTEX"></i></div>
      <div><i id="liveDataCAT"></i></div>
      <div><i id="liveDataHEES"></i></div>
      <div><i id="liveDataPAL"></i></div>
</div>

and update the js to supply values like this.

$("#liveData" + stockInfo1.t).html(stockPrice + stockChange);

If you are familiar on how jquery selectors work, it should be pretty straight forward to understand.

If not, please refer https://api.jquery.com/category/selectors/basic-css-selectors/. This will give you a basic idea. Other selectors can be found at https://api.jquery.com/category/selectors/.

Is there anyway to get the item order list fixed. I am finding that list is duplicating some of the stocks. Thanks for your help — user3036451, Jun 02 '15 at 13:23

Getting jquery data to populate table column

1 Answers1